易企秀招聘

src/templates/eqixrecruit/defaultData/eqixrecruit.js

+export default {
+	logo: {
+		value: "https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixxdky/logo.jpg"
+	},
+	eqixxdkytxt1: {
+		value: "色味俱佳"
+	},
+	eqixxdkytxt2: {
+		value: "回味无穷"
+	},
+	eqixxdkytxt3: {
+		value: "芳香扑鼻"
+	},
+	businessHours: {
+		value: "13:00-23:30"
+	},
+	place: {
+		value: "北京市海淀区东北旺西路58号院尚科社区"
+	}
+}
\ No newline at end of file

src/templates/eqixrecruit/defaultData/eqixrecruitfive.js

+export default {
+	eqixrecruit5head: {
+		value: "工作环境"
+	},
+	eqixrecruit5img: {
+		value: "https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/fiveleft.jpg"
+	},
+	eqixrecruit5img2: {
+		value: "https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/fiverighttop.jpg"
+	},
+	eqixrecruit5img3: {
+		value: "https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/fiverightbot.jpg"
+	},
+	eqixrecruit5img4: {
+		value: "https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/fivebot.jpg"
+	},
+	eqixrecruit5head2: {
+		value: " Work Environmen"
+	}
+}
\ No newline at end of file

src/templates/eqixrecruit/defaultData/eqixrecruitfour.js

+export default {
+	eqixrecruit4head: {
+		value: "福利待遇"
+	},
+	eqixrecruit4img: {
+		value: "https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/logo.jpg"
+	},
+	eqixrecruit4head2: {
+		value: "Welfare Treatment"
+	},
+	eqixrecruit4head3: {
+		value: "如果你足够优秀，有任何要求，尽管提"
+	},
+	eqixrecruit4txt: {
+		value: "五险"
+	},
+	eqixrecruit4txt2: {
+		value: "一金"
+	},
+	eqixrecruit4txt3:{
+		value:"周末"
+	},
+	eqixrecruit4txt4:{
+		value:"双休"
+	},
+	eqixrecruit4txt5:{
+		value:"年底"
+	},
+	eqixrecruit4txt6:{
+		value:"双薪"
+	},
+	eqixrecruit4txt7:{
+		value:"生日"
+	},
+	eqixrecruit4txt8:{
+		value:"福利"
+	},
+	eqixrecruit4txt9:{
+		value:"股权"
+	},
+	eqixrecruit4txt10:{
+		value:"分红"
+	},
+	eqixrecruit4txt11:{
+		value:"点心"
+	},
+	eqixrecruit4txt12:{
+		value:"茶歇"
+	},
+	eqixrecruit4txt13:{
+		value:"交通"
+	},
+	eqixrecruit4txt14:{
+		value:"补助"
+	},
+	eqixrecruit4txt15:{
+		value:"带薪"
+	},
+	eqixrecruit4txt16:{
+		value:"旅游"
+	},
+	eqixrecruit4head4:{
+		value:"拼搏成就梦想，为梦想奔跑"
+	},
+	eqixrecruit4head5:{
+		value:"加入我们，成就你不一样梦想"
+	}
+}
\ No newline at end of file

src/templates/eqixrecruit/defaultData/eqixrecruitseven.js

+export default {
+	eqixrecruit7head: {
+		value: "职位详情"
+	},
+	eqixrecruit7head2: {
+		value: "Job Details"
+	},
+	eqixrecruit7head3: {
+		value: "岗位职责："
+	},
+	eqixrecruit7txt: {
+		value: "1. 参与前端产品开发 ，请输入岗位职责 "
+	},
+	eqixrecruit7txt2: {
+		value: "2. 参与前端产品开发"
+	},
+	eqixrecruit7txt3: {
+		value: "3. 请输入岗位职责维护公司网络运营"
+	},
+	eqixrecruit7head4: {
+		value: "招聘人数：5人"
+	},
+	eqixrecruit7head5: {
+		value: "任职要求："
+	},
+	eqixrecruit7txt4: {
+		value: "1. 2年以上HTML5和CSS3开发经验，有电商平台开发经验"
+	},
+	eqixrecruit7txt5: {
+		value: "2. 熟练前端框架angularjs开发；熟悉jQuery开发2. 参与前端产品开发"
+	},
+	eqixrecruit7txt6: {
+		value: "3. 能使用photoshop工具完成一般的切图"
+	},
+	eqixrecruit7txt7: {
+		value: "4. 了解Web应用工作原理，熟悉常用的Web开发框架；"
+	}
+}
\ No newline at end of file

src/templates/eqixrecruit/defaultData/eqixrecruitsix.js

+export default {
+	eqixrecruit6head: {
+		value: "招聘职位"
+	},
+	eqixrecruit6head2: {
+		value: "Recruitment"
+	},
+	eqixrecruit6head3: {
+		value: "我/们/求/贤/若/渴/只/等/你/来"
+	},
+	eqixrecruit6head4: {
+		value: "JAVA开发工程师"
+	},
+	eqixrecruit6head5: {
+		value: "广告推广经理"
+	},
+	eqixrecruit6head6: {
+		value: "高级广告优化师"
+	},
+	eqixrecruit6head7: {
+		value: "交互设计师"
+	},
+	eqixrecruit6head8: {
+		value: "大客户经理"
+	},
+	eqixrecruit6head9: {
+		value: "高级销售经理"
+	}
+}
\ No newline at end of file

src/templates/eqixrecruit/defaultData/eqixrecruitthree.js

+export default {
+	eqixrecruit3head: {
+		value: "公司历程"
+	},
+	eqixrecruit3head2: {
+		value: "Business Process"
+	},
+	eqixrecruit3img: {
+		value: "https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/scenery.gif"
+	},
+	eqixrecruit3head3: {
+		value: "☆ 2014年7月创意初成"
+	},
+	eqixrecruit3head4: {
+		value: "☆ 2014年11月PC网站上线"
+	},
+	eqixrecruit3head5: {
+		value: "☆ 2015年11月获得A轮融资"
+	},
+	eqixrecruit3head6: {
+		value: "☆ 2016年3月注册用户突破1000万"
+	},
+	eqixrecruit3head7: {
+		value: "☆ 2016年3月成都分公司成立"
+	},
+	eqixrecruit3head8: {
+		value: "☆ 2016年8月宣布完成6000万B轮融资"
+	},
+	eqixrecruit3head9: {
+		value: "☆ 2017年3月推出APP"
+	},
+	eqixrecruit3head10: {
+		value: "☆ 荣获2017年度中国企业营销创新奖"
+	}
+}
\ No newline at end of file

src/templates/eqixrecruit/defaultData/eqixrecruittwo.js

+export default {
+	eqixrecruit2head: {
+		value: "公司简介"
+	},
+	eqixrecruit2img: {
+		value: "https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/computer.jpg"
+	},
+	eqixrecruit2head2: {
+		value: "Company Introduction"
+	},
+	introduction: {
+		value: "八图H5隶属于阜阳八图电子科技有限公司 ，是一个在线H5设计平台，致力于为职场人士提供简单高效办公的在线设计工具。八图H5未来将成为在线设计领域的全能创领者。"
+	}
+}
\ No newline at end of file

src/templates/eqixrecruit/defaultData/index.js

+import eqixrecruit from './eqixrecruit'
+import eqixrecruittwo from './eqixrecruittwo'
+import eqixrecruitthree from './eqixrecruitthree'
+import eqixrecruitfour from './eqixrecruitfour'
+import eqixrecruitfive from './eqixrecruitfive'
+import eqixrecruitsix from './eqixrecruitsix'
+import eqixrecruitseven from './eqixrecruitseven'
+export default {
+  eqixrecruit,
+  eqixrecruittwo,
+  eqixrecruitthree,
+  eqixrecruitfour,
+  eqixrecruitfive,
+  eqixrecruitsix,
+  eqixrecruitseven
+}

src/templates/eqixrecruit/editMethod.js

+export default {
+  setEditData (data) {
+    this.pages[data['page']]['list'][data.index].value =
+            data['value']
+    if (data['editObj']) {
+      this.list[data.index] = data['editObj']
+      this.pages[data['page']]['list'][data.index] =
+              data['editObj']
+    }
+  },
+  cancelEditAction () {
+    this.currentIndex = ''
+    this.cancelEdit = true
+  }
+}

src/templates/eqixrecruit/index.vue

+<template>
+  <swiper :options="swiperOption"
+          :class="'glob-container'"
+          ref="mySwiper"
+          @someSwiperEvent="callback"
+          style="width:1080px;height:1920px;">
+    <swiper-slide style="transform: translate3d(0,0,0)"
+                  class="ani"
+                  v-for="(page, index) in pages"
+                  :key="index"
+                  @load="loaded(index)">
+
+      <component v-if="index == sliderActiveIndex"
+                 :is="page.component"
+                 :ref="'child'+index"
+                 @hook:mounted="loaded(index)"
+                 :schemaData="pages[index].schemaData"
+                 :isEditMode="isEditMode"
+                 :cancelEdit.sync="cancelEdit"
+                 :page="index"
+                 :activeIndex="sliderActiveIndex"></component>
+    </swiper-slide>
+    <!-- <swiper-slide>
+      <div class="container">I'm Slide 2</div>
+    </swiper-slide>
+    <swiper-slide>
+      <div class="container">I'm Slide 3</div>
+    </swiper-slide>-->
+  </swiper>
+</template>
+
+<script>
+import mixin from './mixin'
+import 'swiper/dist/css/swiper.css'
+import { getQuery } from '@/framework/utils'
+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, clearTimeout } from 'timers'
+import  './style/eqixxdky.scss'
+export default {
+  name: 'page',
+  mixins: [mixin],
+  components: {
+    swiper,
+    swiperSlide,
+    ...requireAllPage
+  },
+  computed: {
+    swiper () {
+      return this.$refs.mySwiper.swiper
+    }
+  },
+  data () {
+    return {
+      swiperOption: {
+        // some swiper options/callbacks
+        // 所有的参数同 swiper 官方 api 参数
+        // ...
+      }
+    }
+  },
+  methods: {
+    message (data) {
+      Message.send(data, '*')
+    },
+    loaded (index) {
+      this.$refs['child' + this.sliderActiveIndex][0].enter()
+    },
+    edit (index) {
+      if (getQuery('isEdit')) {
+        this.currentIndex = index
+        var item = this.list[index]
+        this.message(
+          {
+            type: 'edit',
+            item,
+            index
+          },
+          '*'
+        )
+      }
+    },
+    getList () {
+      this.message(
+        {
+          type: 'getList',
+          pages: this.pages
+        },
+        '*'
+      )
+    }
+  },
+  beforeDestroy () {},
+  mounted () {
+    /* Scene.EventBus.on("leaveBefore", e => {
+      console.log("leaveBefore");
+      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, 1000, false);
+      });
+    });*/
+    // this.$refs['child'][0].enter().then(() => {
+
+    // }) 
+  },
+  created () {
+    var vm = this
+    Message.init(e => {
+      var isObj = typeof e.data === 'object'
+      if (isObj && e.data['type'] == 'setData') {
+        vm.setEditData(e.data)
+      }
+      if (isObj && e.data['type'] == 'cancelEdit') {
+        vm.cancelEditAction()
+      }
+      if (isObj && e.data['type'] == 'edit') {
+        vm.currentIndex = e.data.index
+      }
+      if (isObj && e.data['type'] == 'setList') {
+        // vm.list = JSON.parse(JSON.stringify(e.data.list))
+        this.setAllData(e.data)
+      }
+      if (isObj && e.data['type'] == 'getList') {
+        vm.getAllData()
+      }
+      if (isObj && e.data['type'] == 'goPage') {
+        vm.swiper.slideTo(parseInt(e.data.index), 500, false)
+      }
+    })
+    this.swiperOption = {
+      effect: 'fade',
+      observer: true,
+      /* 将observe应用于Swiper的父元素。
+当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
+      observerParents: true,
+      allowTouchMove: !getQuery('isEdit'),
+      /* slidesPerView: 1,
+         autoplay: !getQuery("isEdit")
+           ? {
+               delay: 10000
+             }
+           : false, */
+      loop: false,
+      on: {
+        init () {
+          if (!vm.isEditMode) {
+            // swiperAnimateCache(this); // 隐藏动画元素
+            // swiperAnimate(this); // 初始化完成开始动画
+          }
+        },
+        slideChange () {
+          vm.sliderActiveIndex = this.realIndex
+          if (vm.isEditMode) {
+            // $(".ani").css("visibility", "");
+          }
+        },
+        slideChangeTransitionEnd () {
+          if (!vm.isEditMode) {
+            // swiperAnimate(this);
+          }
+        }
+      }
+    }
+    if (getQuery('isEdit')) {
+      this.isEditMode = true
+    } else {
+      this.isEditMode = false
+    }
+    if (getQuery('filmId') && !this.isEditMode) {
+      getFilmDetail(getQuery('filmId')).then(result => {
+        console.log(result)
+        vm.pages = JSON.parse(result.data.filmData).pageList
+        vm.filmId = result.filmId
+      })
+    } else {
+      if (getQuery('isPreview')) {
+      } else {
+        // vm.getDefaulted();
+      }
+    }
+  },
+  data () {
+    return {
+      date: '',
+      img: '',
+
+      currentIndex: '',
+      isEditMode: true,
+      cancelEdit: false,
+      sliderActiveIndex: 0
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.glob-container {
+  // background-color: red;
+  // filter: url("#goo");
+}
+</style>
+<style>
+.swiper-slide {
+  /* width: 100% !important; */
+}
+</style>

src/templates/eqixrecruit/itemList/eqixrecruit.js

+export default [{
+		type: 'image',
+		name: '图片一',
+		description: '公司的LOGO',
+		dataKey: 'logo',
+		valueRule: ''
+	},
+	{
+		type: 'text',
+		name: '类型一',
+		description: '类型一',
+		dataKey: 'eqixxdkytxt1',
+		valueRule: ''
+	},
+	{
+		type: 'text',
+		name: '类型二',
+		description: '类型二',
+		dataKey: 'eqixxdkytxt2',
+		valueRule: ''
+	},
+	{
+		type: 'text',
+		name: '类型三',
+		description: '类型三',
+		dataKey: 'eqixxdkytxt3',
+		valueRule: ''
+	},
+	{
+		type: 'text',
+		name: '营业时间',
+		description: '营业时间',
+		dataKey: 'businessHours',
+		valueRule: ''
+	},
+	{
+		type: 'text',
+		name: '地点',
+		description: '地点',
+		dataKey: 'place',
+		valueRule: ''
+	}
+]
\ No newline at end of file

src/templates/eqixrecruit/itemList/eqixrecruitfive.js

+export default [
+  {
+    type: 'text',
+    name: '头部',
+    description: '大标题',
+    dataKey: 'eqixrecruit5head',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '工作环境英文',
+    description: '工作环境英文',
+    dataKey: 'eqixrecruit5head2',
+    valueRule: ''
+  },
+  {
+    type: 'image',
+    name: '图片一',
+    description: '图片一',
+    dataKey: 'eqixrecruit5img',
+    valueRule: ''
+  },
+  {
+    type: 'image',
+    name: '图片二',
+    description: '图片二',
+    dataKey: 'eqixrecruit5img2',
+    valueRule: ''
+  },
+  {
+    type: 'image',
+    name: '图片三',
+    description: '图片三',
+    dataKey: 'eqixrecruit5img3',
+    valueRule: ''
+  },
+  {
+    type: 'image',
+    name: '图片四',
+    description: '图片四',
+    dataKey: 'eqixrecruit5img4',
+    valueRule: ''
+  }
+]

src/templates/eqixrecruit/itemList/eqixrecruitfour.js

+export default [
+  {
+    type: 'text',
+    name: '头部',
+    description: '大标题',
+    dataKey: 'eqixrecruit4head',
+    valueRule: ''
+  },
+  {
+    type: 'image',
+    name: '公司logo',
+    description: '公司logo',
+    dataKey: 'eqixrecruit4img',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '福利待遇英文',
+    description: '福利待遇英文',
+    dataKey: 'eqixrecruit4head2',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '标题一',
+    description: '标题一',
+    dataKey: 'eqixrecruit4head3',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容一',
+    description: '内容一',
+    dataKey: 'eqixrecruit4txt',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容二',
+    description: '内容二',
+    dataKey: 'eqixrecruit4txt2',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容三',
+    description: '内容三',
+    dataKey: 'eqixrecruit4txt3',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容四',
+    description: '内容四',
+    dataKey: 'eqixrecruit4txt4',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容五',
+    description: '内容五',
+    dataKey: 'eqixrecruit4txt5',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容六',
+    description: '内容六',
+    dataKey: 'eqixrecruit4txt6',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容七',
+    description: '内容七',
+    dataKey: 'eqixrecruit4txt7',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容八',
+    description: '内容八',
+    dataKey: 'eqixrecruit4txt8',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容九',
+    description: '内容九',
+    dataKey: 'eqixrecruit4txt9',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容十',
+    description: '内容十',
+    dataKey: 'eqixrecruit4txt10',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容十一',
+    description: '内容十一',
+    dataKey: 'eqixrecruit4txt11',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容十二',
+    description: '内容十二',
+    dataKey: 'eqixrecruit4txt12',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容十三',
+    description: '内容十三',
+    dataKey: 'eqixrecruit4txt13',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容十四',
+    description: '内容十四',
+    dataKey: 'eqixrecruit4txt14',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容十五',
+    description: '内容十五',
+    dataKey: 'eqixrecruit4txt15',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容十六',
+    description: '内容十六',
+    dataKey: 'eqixrecruit4txt16',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '标题二',
+    description: '标题二',
+    dataKey: 'eqixrecruit4head4',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '标题三',
+    description: '标题三',
+    dataKey: 'eqixrecruit4head5',
+    valueRule: ''
+  }
+]

src/templates/eqixrecruit/itemList/eqixrecruitseven.js

+export default [
+  {
+    type: 'text',
+    name: '头部',
+    description: '大标题',
+    dataKey: 'eqixrecruit7head',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '职位详情英文',
+    description: '职位详情英文',
+    dataKey: 'eqixrecruit7head2',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '标题一',
+    description: '标题一',
+    dataKey: 'eqixrecruit7head3',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容一',
+    description: '内容一',
+    dataKey: 'eqixrecruit7txt',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容二',
+    description: '内容二',
+    dataKey: 'eqixrecruit7txt2',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容三',
+    description: '内容三',
+    dataKey: 'eqixrecruit7txt3',
+    valueRule: ''
+
+  },
+  {
+    type: 'text',
+    name: '标题二',
+    description: '标题二',
+    dataKey: 'eqixrecruit7head4',
+    valueRule: ''
+
+  },
+  {
+    type: 'text',
+    name: '标题三',
+    description: '标题三',
+    dataKey: 'eqixrecruit7head5',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容四',
+    description: '内容四',
+    dataKey: 'eqixrecruit7txt4',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容五',
+    description: '内容五',
+    dataKey: 'eqixrecruit7txt5',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容六',
+    description: '内容六',
+    dataKey: 'eqixrecruit7txt6',
+    valueRule: ''
+
+  },
+  {
+    type: 'text',
+    name: '内容七',
+    description: '内容七',
+    dataKey: 'eqixrecruit7txt7',
+    valueRule: ''
+
+  }
+]

src/templates/eqixrecruit/itemList/eqixrecruitsix.js

+export default [
+  {
+    type: 'text',
+    name: '头部',
+    description: '大标题',
+    dataKey: 'eqixrecruit6head',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '招聘职位英文',
+    description: '招聘职位英文',
+    dataKey: 'eqixrecruit6head2',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '标题一',
+    description: '标题一',
+    dataKey: 'eqixrecruit6head3',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容一',
+    description: '内容一',
+    dataKey: 'eqixrecruit6head4',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容二',
+    description: '内容二',
+    dataKey: 'eqixrecruit6head5',
+    valueRule: ''
+
+  },
+  {
+    type: 'text',
+    name: '内容三',
+    description: '内容三',
+    dataKey: 'eqixrecruit6head6',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容四',
+    description: '内容四',
+    dataKey: 'eqixrecruit6head7',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '内容五',
+    description: '内容五',
+    dataKey: 'eqixrecruit6head8',
+    valueRule: ''
+
+  },
+  {
+    type: 'text',
+    name: '内容六',
+    description: '内容六',
+    dataKey: 'eqixrecruit6head9',
+    valueRule: ''
+  }
+]

src/templates/eqixrecruit/itemList/eqixrecruitthree.js

+export default [
+  {
+    type: 'text',
+    name: '头部',
+    description: '大标题',
+    dataKey: 'eqixrecruit3head',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '英文标题',
+    description: '英文标题',
+    dataKey: 'eqixrecruit3head2',
+    valueRule: ''
+
+  },
+  {
+    type: 'image',
+    name: '公司历程动图',
+    description: '公司历程动图',
+    dataKey: 'eqixrecruit3img',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '标题一',
+    description: '标题一',
+    dataKey: 'eqixrecruit3head3',
+    valueRule: ''
+
+  },
+  {
+    type: 'text',
+    name: '标题二',
+    description: '标题二',
+    dataKey: 'eqixrecruit3head4',
+    valueRule: ''
+
+  },
+  {
+    type: 'text',
+    name: '标题三',
+    description: '标题三',
+    dataKey: 'eqixrecruit3head5',
+    valueRule: ''
+
+  },
+  {
+    type: 'text',
+    name: '标题四',
+    description: '标题四',
+    dataKey: 'eqixrecruit3head6',
+    valueRule: ''
+
+  },
+  {
+    type: 'text',
+    name: '标题五',
+    description: '标题五',
+    dataKey: 'eqixrecruit3head7',
+    valueRule: ''
+
+  },
+  {
+    type: 'text',
+    name: '标题六',
+    description: '标题六',
+    dataKey: 'eqixrecruit3head8',
+    valueRule: ''
+
+  },
+  {
+    type: 'text',
+    name: '标题七',
+    description: '标题七',
+    dataKey: 'eqixrecruit3head9',
+    valueRule: ''
+
+  },
+  {
+    type: 'text',
+    name: '标题八',
+    description: '标题八',
+    dataKey: 'eqixrecruit3head10',
+    valueRule: ''
+
+  }
+]

src/templates/eqixrecruit/itemList/eqixrecruittwo.js

+export default [
+  {
+    type: 'text',
+    name: '头部',
+    description: '大标题',
+    dataKey: 'eqixrecruit2head',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '英文标题',
+    valueRule: '',
+    description: '英文标题',
+    dataKey: 'eqixrecruit2head2'
+
+  },
+  {
+    type: 'image',
+    name: '公司图片',
+    description: '公司图片',
+    dataKey: 'eqixrecruit2img',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '公司简介',
+    valueRule: '',
+    description: '公司简介',
+    dataKey: 'introduction'
+
+  }
+]

src/templates/eqixrecruit/itemList/index.js

+import eqixrecruit from './eqixrecruit'
+import eqixrecruittwo from './eqixrecruittwo'
+import eqixrecruitthree from './eqixrecruitthree'
+import eqixrecruitfour from './eqixrecruitfour'
+import eqixrecruitfive from './eqixrecruitfive'
+import eqixrecruitsix from './eqixrecruitsix'
+import eqixrecruitseven from './eqixrecruitseven'
+import schedule from './schedule'
+
+export default {
+  eqixrecruit,
+  eqixrecruittwo,
+  eqixrecruitthree,
+  eqixrecruitfour,
+  eqixrecruitfive,
+  eqixrecruitsix,
+  eqixrecruitseven,
+  schedule
+}

src/templates/eqixrecruit/itemList/schedule.js

+export default [
+  {
+    type: 'image',
+    name: '企业logo',
+    description: '请上传png格式企业logo',
+    dataKey: 'companyLogo',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '企业名称',
+    description: '',
+    valueRule: '',
+    dataKey: 'companyName'
+  },
+  {
+    type: 'list',
+    name: '日程列表',
+    modelSchema: [ // 创建子项的Schema列表
+      {
+        content: {
+          type: 'text',
+          name: '内容', // 字段名称
+          description: '请输入内容' // 用户填写时字段提示语
+        },
+        address: {
+          type: 'text',
+          name: '地点', // 字段名称
+          description: '请输入地点', // 用户填写时字段提示语
+          default: { // 默认
+            value: '会议室'
+          }
+        },
+        department: {
+          type: 'text',
+          name: '部门', // 字段名称
+          description: '请输入部门', // 用户填写时字段提示语
+          default: { // 默认
+            value: '总裁办'
+          }
+        },
+        time: {
+          type: 'text',
+          name: '时间', // 字段名称
+          description: '请输入时间', // 用户填写时字段提示语
+          default: { // 默认
+            value: '09:30 AM - 10:00 AM'
+          }
+        }
+      }
+    ],
+    dataKey: 'scheduleList'
+
+  }
+]

src/templates/eqixrecruit/keyframe.js

+export function enter (callback) {
+  var countEnterTime = 0
+  var promiseAll = []
+  this.keyframes.map(item => {
+    var currentTime = item.enter.options.duration + item.enter.options.delay
+    countEnterTime =
+      countEnterTime < currentTime ? currentTime : countEnterTime
+    item.enterBefore &&
+      $.Velocity($(item.el), item.enterBefore.style, item.enterBefore.options)
+    if (!item.enter.options.loop) {
+      promiseAll.push(
+        $.Velocity($(item.el), item.enter.style, item.enter.options)
+      )
+    } else {
+      $.Velocity($(item.el), item.enter.style, item.enter.options)
+    }
+  })
+  // callback && callback(countEnterTime)
+  this.enterAfter()
+  return Promise.all(promiseAll)
+}
+export function leave (callback) {
+  var promiseAll = []
+  this.keyframes.map(item => {
+    item.leave && promiseAll.push($.Velocity($(item.el), 'reverse', {
+      duration: 1500
+    }))
+  })
+  return Promise.all(promiseAll)
+}

src/templates/eqixrecruit/methods.js

+export default {
+  created () {
+    // console.log(this.schemaData)
+    window.addEventListener(
+      'message',
+      (e) => {
+        if (e.source != window.parent) return
+        if (typeof e.data === 'object' && e.data['type'] === 'editPage') {
+          if (this.page === e.data['page']) {
+            this.currentIndex = e.data['index']
+          }
+        }
+      },
+      false
+    )
+  },
+  watch: {
+    cancelEdit (value) {
+      console.log('cancels')
+      if (value === true) {
+        this.currentIndex = ''
+        this.$emit('update:cancelEdit', false)
+      }
+    }
+  },
+  methods: {
+    message (data) {
+      parent.postMessage(data, '*')
+    },
+    edit (index) {
+      if (getQuery('isEdit')) {
+        this.currentIndex = index
+        var item = this.list[index]
+        console.log(this.currentIndex)
+        this.message(
+          {
+            type: 'edit',
+            item,
+            index,
+            page: this.page
+          },
+          '*'
+        )
+      }
+    },
+    getList () {
+      this.message(
+        {
+          type: 'getList',
+          list: this.list
+        },
+        '*'
+      )
+    },
+    getValue (dataKey) {
+      return this.schemaData[dataKey] ? this.schemaData[dataKey]['value'] : ''
+    },
+    getStyle (index) {
+      return this.list[index] ? this.list[index]['style'] : ''
+    },
+    isEdited (index) {
+      return this.isEditMode && this.currentIndex === index ? 'isEdited' : ''
+    },
+    isEdit (index) {
+      return this.isEditMode ? 'isEdit' : ''
+    },
+    isAnimeted (index) {
+      return this.isEditMode ? '' : 'animated'
+    },
+    timeFormate (timeStamp) {
+      let dateString = ''
+      let year = new Date(timeStamp).getFullYear()
+      let month =
+        new Date(timeStamp).getMonth() + 1 < 10
+          ? '0' + (new Date(timeStamp).getMonth() + 1)
+          : new Date(timeStamp).getMonth() + 1
+      let date =
+        new Date(timeStamp).getDate() < 10
+          ? '0' + new Date(timeStamp).getDate()
+          : new Date(timeStamp).getDate()
+      let hh =
+        new Date(timeStamp).getHours() < 10
+          ? '0' + new Date(timeStamp).getHours()
+          : new Date(timeStamp).getHours()
+      let mm =
+        new Date(timeStamp).getMinutes() < 10
+          ? '0' + new Date(timeStamp).getMinutes()
+          : new Date(timeStamp).getMinutes()
+      // let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
+      // return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm + "" + " " + hh + ":" + mm; ;
+      dateString = year + '.' + month + '.' + date
+      return dateString
+      // console.log(this.nowTime);
+    }
+  }
+}

src/templates/eqixrecruit/mixin.js

+import data from './schemaData.js'
+import editMethod from './editMethod.js'
+import requireIcons from '@/icons/requireIcons'
+   /*console.log(JSON.stringify(data))*/
+
+export default {
+  data: function () {
+    return {
+      pages: data.pageList,
+      sceneData: data.sceneData
+    }
+  },
+  methods: {
+    callback () {
+      console.log('callback')
+    },
+    getDefaulted () {
+      this.pages = this.pages.map(function (item) {
+        item.list.map(ele => {
+          return (ele = Object.assign(ele, ele.default))
+        })
+        return item
+        // (item = Object.assign(item, item.default));
+      })
+    },
+    getAllData () {
+      this.message(
+        {
+          type: 'getList',
+          pages: this.pages
+        },
+        '*'
+      )
+    },
+    setAllData (data) {
+      this.pages = data.pages
+    },
+    ...editMethod
+  },
+  mounted () {
+    function setZoom () {
+      var unit = 1920
+      var unit2 = 1080
+      var width = window.innerWidth
+      var height = window.innerHeight
+      var zoom = height / 1920
+      if (width / height <= 9 / 16) {
+        zoom = width / 1080
+      }
+      if (width / height >= 9 / 16) {
+        zoom = height / 1920
+      }
+      var container = document.querySelectorAll('.container')
+      for (let index = 0; index < container.length; index++) {
+        // container[index].style.transform = `scale(${zoom})`;
+      }
+      // console.log(zoom);
+      document.querySelector(
+        '.swiper-container'
+      ).style.transform = `scale(${zoom})`
+    }
+    setZoom()
+    addEventListener('resize', setZoom, false)
+  },
+  created: function () {
+    console.log('我是mixin 的crteated')
+  }
+}

src/templates/eqixrecruit/pages/eqixrecruit.vue

+<template>
+	<div class="containerone">
+		<div class="p-index main" id="con" style="zoom:3.385">
+
+			<div class="nr" id="nr" style="position: relative; width: 100%; height: 100%;">
+				<section class="main-page z-current">
+					<div class="m-img" id="page1">
+						
+						<div class="edit_wrapper" data-scene-id="407774">
+							<div id="wrapper-background4003890" style="width: 100%; height: 100%; background-color: rgb(255, 255, 255);"></div>
+							<ul eqx-edit-destroy="" id="edit_area4003890" paste-element="" class="edit_area weebly-content-area weebly-area-active" style="margin-top: 41.5px;">
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_8470775919" num="1" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -28px; top: -69px; z-index: 1; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -28px; top: -69px; z-index: 1; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 1s ease 0s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="8470775919" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_446901300" num="2" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -27px; top: -67px; z-index: 2; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -27px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 2; animation: 1.1s ease 0.1s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="446901300" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_749863091" num="3" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -67px; z-index: 3; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 3; animation: 1.2s ease 0.2s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="749863091" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_1745274314" num="4" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -27.5px; top: -67px; z-index: 4; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -27.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 4; animation: 1.3s ease 0.3s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="1745274314" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_6760988200" num="5" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -67px; z-index: 5; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 5; animation: 1.4s ease 0.4s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="6760988200" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_7373251388" num="6" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -68px; z-index: 6; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -68px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 6; animation: 1.5s ease 0.5s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="7373251388" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_2379204243" num="7" ctype="4" comp-resize="" data-event="1120601" style="width: 379px; height: 738px; left: -28.5px; top: -151px; z-index: 7; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: -151px; left: -28.5px; width: 100%; height: 100%; z-index: 7; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.3s 1 normal both running puffIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="2379204243" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/background.jpg" style="width: 497px; height: 738px; margin-top: 0px; margin-left: -59px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_8389522071" num="8" ctype="4" comp-resize="" data-event="1120601" style="width: 235px; height: 135px; left: 38px; top: 97.5px; z-index: 9; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 97.5px; left: 38px; width: 100%; height: 100%; z-index: 9; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.9s 1 normal both running bounceInUp;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="8389522071" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/dream.jpg" style="width: 235px; height: 135px; margin-top: 0px; margin-left: 0px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_9024007030" num="8" ctype="4" comp-resize="" data-event="1120601" style="width: 321px; height: 103px; left: -1px; top: 13px; z-index: 10; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 13px; left: -1px; width: 100%; height: 100%; z-index: 10; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.6s 1 normal both running bounceInUp;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="9024007030" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/finger.jpg" style="width: 321px; height: 103px; margin-top: -0.5px; margin-left: 0px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_1905134156" num="8" ctype="4" comp-resize="" data-event="1120601" style="width: 290px; height: 118px; left: 16px; top: 243px; z-index: 11; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 243px; left: 16px; width: 100%; height: 100%; z-index: 11; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 1.2s 1 normal both running bounceInUp;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="1905134156" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/struggle.jpg" style="width: 290px; height: 118px; margin-top: 0px; margin-left: 0px;"></div>
+									</div>
+								</li>
+								
+							</ul>
+						</div>
+					</div>
+				</section>
+			</div>
+
+		</div>
+	</div>
+</template>
+
+<script>
+	import methods from '../methods'
+	import anime from 'animejs/lib/anime.es.js'
+	import Scene from '@/framework/utils/sence'
+	export default {
+		name: 'eqixxdky',
+		props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
+		mixins: [methods],
+		components: {},
+		created() {
+			console.log(this.schemaData)
+		},
+		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['mlxg'],
+						translateX: 0,
+						opacity: 1,
+						duration: 2000
+					}).finished,
+					anime({
+						targets: this.$refs['title'],
+						translateX: 0,
+						opacity: 1,
+						delay: 1000,
+						duration: 500,
+						easing: 'easeInOutQuad'
+					}).finished,
+					anime({
+						targets: this.$refs['decorate'],
+						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() {
+				console.log('enterBefore')
+				anime({
+					targets: '#cd-image-1 circle',
+					duration: 0,
+					r: [0, 2920]
+				})
+				anime({
+					targets: this.$refs['mlxg'],
+					translateX: -1500,
+					opacity: 0,
+					duration: 0
+				})
+				anime({
+					targets: this.$refs['decorate'],
+					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: ''
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.containerone {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+</style>
\ No newline at end of file

src/templates/eqixrecruit/pages/eqixrecruitfive.vue

+<template>
+	<div class="containerone">
+
+		<div class="p-index main" id="con" style="zoom:3.385">
+
+			<div class="nr" id="nr" style="position: relative; width: 100%; height: 100%;">
+				<section class="main-page z-current" style="transition: transform 0.4s linear 0s; transform: translateY(0px);">
+					<div class="m-img" id="page5">
+						<div class="edit_wrapper" data-scene-id="407774">
+							<div id="wrapper-background4003894" style="width: 100%; height: 100%; background-color: rgb(255, 255, 255);"></div>
+							<ul eqx-edit-destroy="" id="edit_area4003894" paste-element="" class="edit_area weebly-content-area weebly-area-active" style="margin-top: 41.5px;">
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_7696846457" num="1" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -28px; top: -69px; z-index: 2; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -28px; top: -69px; z-index: 2; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 1s ease 0s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="7696846457" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_580397902" num="2" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -27px; top: -67px; z-index: 3; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -27px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 3; animation: 1.1s ease 0.1s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="580397902" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_1982920138" num="3" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -67px; z-index: 4; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 4; animation: 1.2s ease 0.2s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="1982920138" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_6453955887" num="4" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -27.5px; top: -67px; z-index: 5; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -27.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 5; animation: 1.3s ease 0.3s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="6453955887" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_4822454362" num="5" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -67px; z-index: 6; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 6; animation: 1.4s ease 0.4s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="4822454362" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_7295506469" num="6" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -68px; z-index: 7; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -68px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 7; animation: 1.5s ease 0.5s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="7295506469" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_2483279697" num="7" ctype="4" comp-resize="" data-event="1120601" style="width: 379px; height: 733px; left: -28.5px; top: -150px; z-index: 8; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: -150px; left: -28.5px; width: 100%; height: 100%; z-index: 8; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.3s 1 normal both running puffIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="2483279697" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/background.jpg" style="width: 497px; height: 733px; margin-top: 0px; margin-left: -59px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_2329724725" num="8" ctype="h" comp-resize="" data-event="1120601" style="width: 260px; height: 430px; left: 30px; top: 28px; z-index: 9; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 30px; top: 28px; z-index: 9; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(196, 67, 60); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.5s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="2329724725" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgba(255, 255, 255, 0.9);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_9236643204" num="9" ctype="h" comp-resize="" data-event="1120601" style="width: 145px; height: 29px; left: 87px; top: 40px; z-index: 10; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 87px; top: 40px; z-index: 10; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.8s 1 normal both running rollIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="9236643204" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_3664034057" num="10" ctype="2" comp-resize="" style="width: 128px; height: 40px; left: 95px; top: 33px; z-index: 11; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 33px; left: 95px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 16px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(255, 255, 255); z-index: 11; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="3664034057" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 128px; height: 40px;"><span style="font-size: 16px ;">{{getValue('eqixrecruit5head')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_695348534" num="11" ctype="4" comp-resize="" data-event="1120601" style="width: 184px; height: 14px; left: 68.2375px; top: 434.718px; z-index: 12; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 434.718px; left: 68.2375px; width: 100%; height: 100%; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 12; animation: 2s ease 2.2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="695348534" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/jiaru.jpg" style="width: 184.1px; height: 14px; margin-left: -0.05px; margin-top: 0px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_4284234204" num="12" ctype="2" comp-resize="" style="width: 340px; height: 38px; left: -11px; top: 60px; z-index: 13; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 60px; left: -11px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); z-index: 13; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1.2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="4284234204" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 38px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit5head2')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_5383145839" num="13" ctype="h" comp-resize="" data-event="1120601" style="width: 232px; height: 20px; left: 44px; top: 88px; z-index: 14; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 44px; top: 88px; z-index: 14; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 1.4s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 420 120" preserveAspectRatio="none" id="5383145839" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 60h420v1h-420v-1z" style="fill: rgb(186, 42, 33);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_3825834028" num="14" ctype="h" comp-resize="" data-event="1120601" style="width: 232px; height: 20px; left: 44px; top: 412px; z-index: 15; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 44px; top: 412px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 15; animation: 2s ease 2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 420 120" preserveAspectRatio="none" id="3825834028" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 60h420v1h-420v-1z" style="fill: rgb(186, 42, 33);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_2977930966" num="15" ctype="4" comp-resize="" data-event="1120601" style="width: 122px; height: 214px; left: 44px; top: 105px; z-index: 16; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 105px; left: 44px; width: 100%; height: 100%; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 16; animation: 2s ease 1.6s 1 normal both running bounceInDown;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="2977930966" ctype="4" class="element comp_image editable-image" :src="getValue('eqixrecruit5img')" style="width: 380px; height: 214px; margin-top: 0px; margin-left: -129px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_8379870860" num="16" ctype="4" comp-resize="" data-event="1120601" style="width: 105px; height: 105px; left: 171px; top: 105px; z-index: 17; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 105px; left: 171px; width: 100%; height: 100%; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 17; animation: 2s ease 2s 1 normal both running bounceInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="8379870860" ctype="4" class="element comp_image editable-image" :src="getValue('eqixrecruit5img2')" style="width: 187px; height: 105px; margin-top: 0px; margin-left: -41px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_1200892348" num="17" ctype="4" comp-resize="" data-event="1120601" style="width: 232px; height: 88px; left: 44px; top: 323px; z-index: 18; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 323px; left: 44px; width: 100%; height: 100%; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 18; animation: 2s ease 2.6s 1 normal both running bounceInUp;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="1200892348" ctype="4" class="element comp_image editable-image" :src="getValue('eqixrecruit5img3')" style="width: 232px; height: 130px; margin-top: -21.5px; margin-left: 0px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_1905909744" num="18" ctype="4" comp-resize="" data-event="1120601" style="width: 105px; height: 105px; left: 171px; top: 214px; z-index: 19; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 214px; left: 171px; width: 100%; height: 100%; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 19; animation: 2s ease 2.4s 1 normal both running bounceInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="1905909744" ctype="4" class="element comp_image editable-image" :src="getValue('eqixrecruit5img4')" style="width: 186px; height: 105px; margin-top: 0px; margin-left: -40.5px;"></div>
+									</div>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</section>
+			</div>
+
+		</div>
+
+	</div>
+</template>
+
+<script>
+	import methods from '../methods'
+	import anime from 'animejs/lib/anime.es.js'
+	import Scene from '@/framework/utils/sence'
+	export default {
+		name: 'retail',
+		props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
+		mixins: [methods],
+		components: {},
+		created() {
+			console.log(this.schemaData)
+		},
+		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['mlxg'],
+						translateX: 0,
+						opacity: 1,
+						duration: 2000
+					}).finished,
+					anime({
+						targets: this.$refs['title'],
+						translateX: 0,
+						opacity: 1,
+						delay: 1000,
+						duration: 500,
+						easing: 'easeInOutQuad'
+					}).finished,
+					anime({
+						targets: this.$refs['decorate'],
+						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() {
+				console.log('enterBefore')
+				anime({
+					targets: '#cd-image-1 circle',
+					duration: 0,
+					r: [0, 2920]
+				})
+				anime({
+					targets: this.$refs['mlxg'],
+					translateX: -1500,
+					opacity: 0,
+					duration: 0
+				})
+				anime({
+					targets: this.$refs['decorate'],
+					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: ''
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.containerone {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+</style>
\ No newline at end of file

src/templates/eqixrecruit/pages/eqixrecruitfour.vue

+<template>
+	<div class="containerone">
+
+		<div class="p-index main" id="con" style="zoom:3.385">
+
+			<div class="nr" id="nr" style="position: relative; width: 100%; height: 100%;">
+				<section class="main-page z-current" style="transition: transform 0.4s linear 0s; transform: translateY(0px);">
+					<div class="m-img" id="page4">
+						<div class="edit_wrapper" data-scene-id="407774">
+							<div id="wrapper-background4003893" style="width: 100%; height: 100%; background-color: rgb(255, 255, 255);"></div>
+							<ul eqx-edit-destroy="" id="edit_area4003893" paste-element="" class="edit_area weebly-content-area weebly-area-active" style="margin-top: 41.5px;">
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_227695525" num="1" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -28px; top: -69px; z-index: 2; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -28px; top: -69px; z-index: 2; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 1s ease 0s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="227695525" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_6534841383" num="2" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -27px; top: -67px; z-index: 3; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -27px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 3; animation: 1.1s ease 0.1s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="6534841383" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_8960727789" num="3" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -67px; z-index: 4; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 4; animation: 1.2s ease 0.2s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="8960727789" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_98555390" num="4" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -27.5px; top: -67px; z-index: 5; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -27.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 5; animation: 1.3s ease 0.3s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="98555390" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_1434554772" num="5" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -67px; z-index: 6; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 6; animation: 1.4s ease 0.4s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="1434554772" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_1835280698" num="6" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -68px; z-index: 7; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -68px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 7; animation: 1.5s ease 0.5s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="1835280698" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_9598354101" num="7" ctype="4" comp-resize="" data-event="1120601" style="width: 378px; height: 747px; left: -28.5px; top: -171px; z-index: 8; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: -171px; left: -28.5px; width: 100%; height: 100%; z-index: 8; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.3s 1 normal both running puffIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="9598354101" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/background.jpg" style="width: 507px; height: 747px; margin-top: 0px; margin-left: -64.5px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_7466321460" num="8" ctype="h" comp-resize="" data-event="1120601" style="width: 260px; height: 430px; left: 30px; top: 28px; z-index: 9; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 30px; top: 28px; z-index: 9; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(196, 67, 60); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.5s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="7466321460" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgba(255, 255, 255, 0.9);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_2721906972" num="9" ctype="h" comp-resize="" data-event="1120601" style="width: 145px; height: 29px; left: 87px; top: 40px; z-index: 10; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 87px; top: 40px; z-index: 10; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.8s 1 normal both running rollIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="2721906972" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_7995628372" num="10" ctype="2" comp-resize="" style="width: 128px; height: 40px; left: 96px; top: 34px; z-index: 11; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 34px; left: 96px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 16px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(255, 255, 255); z-index: 11; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="7995628372" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 128px; height: 40px;"><span style="font-size: 16px ;">{{getValue('eqixrecruit4head')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_6203177087" num="11" ctype="4" comp-resize="" data-event="1120601" style="width: 184px; height: 14px; left: 68.2375px; top: 434.718px; z-index: 12; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 434.718px; left: 68.2375px; width: 100%; height: 100%; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 12; animation: 2s ease 2.2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="6203177087" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/jiaru.jpg" style="width: 184.1px; height: 14px; margin-left: -0.05px; margin-top: 0px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_3944366233" num="12" ctype="2" comp-resize="" style="width: 340px; height: 30px; left: -10px; top: 63px; z-index: 13; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 63px; left: -10px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); z-index: 13; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1.2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="3944366233" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 30px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit4head2')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_1959791308" num="14" ctype="h" comp-resize="" data-event="1120601" style="width: 232px; height: 20px; left: 44px; top: 412px; z-index: 14; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 44px; top: 412px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 14; animation: 2s ease 2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 420 120" preserveAspectRatio="none" id="1959791308" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 60h420v1h-420v-1z" style="fill: rgb(186, 42, 33);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_8498481854" num="15" ctype="h" comp-resize="" data-event="1120601" style="width: 66px; height: 66px; left: 127px; top: 139px; z-index: 15; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 127px; top: 139px; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 15; animation: 2s ease 2.3s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 480 480" preserveAspectRatio="none" id="8498481854" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 480v-480h480v480h-480zm479-479h-478v478h478v-478z" style="fill: rgb(255, 255, 255);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_6479762966" num="16" ctype="h" comp-resize="" data-event="1120601" style="width: 66px; height: 66px; left: 52px; top: 139px; z-index: 16; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 52px; top: 139px; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 16; animation: 2s ease 2.6s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 480 480" preserveAspectRatio="none" id="6479762966" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 480v-480h480v480h-480zm479-479h-478v478h478v-478z" style="fill: rgb(255, 255, 255);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_1138616062" num="17" ctype="h" comp-resize="" data-event="1120601" style="width: 66px; height: 66px; left: 201px; top: 139px; z-index: 17; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 201px; top: 139px; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 17; animation: 2s ease 2.4s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 480 480" preserveAspectRatio="none" id="1138616062" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 480v-480h480v480h-480zm479-479h-478v478h478v-478z" style="fill: rgb(255, 255, 255);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_5996394313" num="18" ctype="h" comp-resize="" data-event="1120601" style="width: 66px; height: 66px; left: 127px; top: 213.5px; z-index: 18; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 127px; top: 213.5px; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 18; line-height: 1; animation: 2s ease 2.5s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 480 480" preserveAspectRatio="none" id="5996394313" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 480v-480h480v480h-480zm479-479h-478v478h478v-478z" style="fill: rgb(255, 255, 255);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_6089942601" num="19" ctype="h" comp-resize="" data-event="1120601" style="width: 66px; height: 66px; left: 52px; top: 213.5px; z-index: 19; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 52px; top: 213.5px; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 19; animation: 2s ease 2.3s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 480 480" preserveAspectRatio="none" id="6089942601" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 480v-480h480v480h-480zm479-479h-478v478h478v-478z" style="fill: rgb(255, 255, 255);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_4620148485" num="20" ctype="h" comp-resize="" data-event="1120601" style="width: 66px; height: 66px; left: 201px; top: 213.5px; z-index: 20; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 201px; top: 213.5px; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 20; line-height: 1; animation: 2s ease 2.2s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 480 480" preserveAspectRatio="none" id="4620148485" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 480v-480h480v480h-480zm479-479h-478v478h478v-478z" style="fill: rgb(255, 255, 255);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_6230757768" num="21" ctype="h" comp-resize="" data-event="1120601" style="width: 66px; height: 66px; left: 127px; top: 287px; z-index: 21; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 127px; top: 287px; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 21; line-height: 1; animation: 2s ease 2.5s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 480 480" preserveAspectRatio="none" id="6230757768" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 480v-480h480v480h-480zm479-479h-478v478h478v-478z" style="fill: rgb(255, 255, 255);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_4379834654" num="22" ctype="h" comp-resize="" data-event="1120601" style="width: 66px; height: 66px; left: 52px; top: 287px; z-index: 22; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 52px; top: 287px; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 22; animation: 2s ease 2.8s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 480 480" preserveAspectRatio="none" id="4379834654" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 480v-480h480v480h-480zm479-479h-478v478h478v-478z" style="fill: rgb(255, 255, 255);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_73000110" num="23" ctype="h" comp-resize="" data-event="1120601" style="width: 66px; height: 66px; left: 201px; top: 287px; z-index: 23; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 201px; top: 287px; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 23; animation: 2s ease 2.6s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 480 480" preserveAspectRatio="none" id="73000110" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 480v-480h480v480h-480zm479-479h-478v478h478v-478z" style="fill: rgb(255, 255, 255);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_3409806917" num="24" ctype="2" comp-resize="" style="width: 340px; height: 30px; left: -10px; top: 103.4px; z-index: 24; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 103.4px; left: -10px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); z-index: 24; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 1s ease 2s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="3409806917" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 30px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit4head3')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_4062812174" num="25" ctype="2" comp-resize="" style="width: 340px; height: 62px; left: -14px; top: 353px; z-index: 25; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 353px; left: -14px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 25; animation: 2s ease 2.8s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="4062812174" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 62px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit4head4')}}<br>{{getValue('eqixrecruit4head5')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_5805216496" num="26" ctype="4" comp-resize="" data-event="1120601" style="width: 51px; height: 28px; left: 134.763px; top: 232.75px; z-index: 26; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 232.75px; left: 134.763px; width: 100%; height: 100%; z-index: 26; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 2.7s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="5805216496" ctype="4" class="element comp_image editable-image" :src="getValue('eqixrecruit4img')" style="width: 51px; height: 28.5px; margin-top: -0.25px; margin-left: 0px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_3016759334" num="27" ctype="2" comp-resize="" style="width: 76px; height: 56px; left: 47px; top: 141px; z-index: 27; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 141px; left: 47px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); z-index: 27; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 2.6s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="3016759334" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 76px; height: 56px;"><span style="font-size: 14px ;">{{getValue('eqixrecruit4txt')}}<br>{{getValue('eqixrecruit4txt2')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_1981708747" num="28" ctype="2" comp-resize="" style="width: 76px; height: 56px; left: 122px; top: 141px; z-index: 28; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 141px; left: 122px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 28; animation: 2s ease 2.3s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="1981708747" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 76px; height: 56px;"><span style="font-size: 14px ;">{{getValue('eqixrecruit4txt3')}}<br>{{getValue('eqixrecruit4txt4')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_4788194919" num="29" ctype="2" comp-resize="" style="width: 76px; height: 62px; left: 196px; top: 141px; z-index: 29; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 141px; left: 196px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 29; animation: 2s ease 2.2s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="4788194919" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 76px; height: 62px;"><span style="font-size: 14px ;">{{getValue('eqixrecruit4txt5')}}<br>{{getValue('eqixrecruit4txt6')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_7997671984" num="30" ctype="2" comp-resize="" style="width: 76px; height: 56px; left: 47px; top: 216px; z-index: 30; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 216px; left: 47px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 30; animation: 2s ease 2.4s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="7997671984" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 76px; height: 56px;"><span style="font-size: 14px ;">{{getValue('eqixrecruit4txt7')}}<br>{{getValue('eqixrecruit4txt8')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_6895971330" num="31" ctype="2" comp-resize="" style="width: 76px; height: 56px; left: 196px; top: 216px; z-index: 31; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 216px; left: 196px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 31; animation: 2s ease 2.2s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="6895971330" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 76px; height: 56px;"><span style="font-size: 14px ;">{{getValue('eqixrecruit4txt9')}}<br>{{getValue('eqixrecruit4txt10')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_9705654999" num="32" ctype="2" comp-resize="" style="width: 76px; height: 56px; left: 47px; top: 289px; z-index: 32; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 289px; left: 47px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 32; animation: 2s ease 2.8s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="9705654999" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 76px; height: 56px;"><span style="font-size: 14px ;">{{getValue('eqixrecruit4txt11')}}<br>{{getValue('eqixrecruit4txt12')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_8203175790" num="33" ctype="2" comp-resize="" style="width: 76px; height: 56px; left: 123px; top: 289px; z-index: 33; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 289px; left: 123px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 33; animation: 2s ease 2.3s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="8203175790" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 76px; height: 56px;"><span style="font-size: 14px ;">{{getValue('eqixrecruit4txt13')}}<br>{{getValue('eqixrecruit4txt14')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_5667339244" num="34" ctype="2" comp-resize="" style="width: 76px; height: 56px; left: 196px; top: 289px; z-index: 34; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 289px; left: 196px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 34; animation: 2s ease 2.6s 1 normal both running bounceIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="5667339244" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 76px; height: 56px;"><span style="font-size: 14px ;">{{getValue('eqixrecruit4txt15')}}<br>{{getValue('eqixrecruit4txt16')}}</span></div>
+										</div>
+									</div>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</section>
+			</div>
+
+		</div>
+
+	</div>
+</template>
+
+<script>
+	import methods from '../methods'
+	import anime from 'animejs/lib/anime.es.js'
+	import Scene from '@/framework/utils/sence'
+	export default {
+		name: 'retail',
+		props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
+		mixins: [methods],
+		components: {},
+		created() {
+			console.log(this.schemaData)
+		},
+		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['mlxg'],
+						translateX: 0,
+						opacity: 1,
+						duration: 2000
+					}).finished,
+					anime({
+						targets: this.$refs['title'],
+						translateX: 0,
+						opacity: 1,
+						delay: 1000,
+						duration: 500,
+						easing: 'easeInOutQuad'
+					}).finished,
+					anime({
+						targets: this.$refs['decorate'],
+						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() {
+				console.log('enterBefore')
+				anime({
+					targets: '#cd-image-1 circle',
+					duration: 0,
+					r: [0, 2920]
+				})
+				anime({
+					targets: this.$refs['mlxg'],
+					translateX: -1500,
+					opacity: 0,
+					duration: 0
+				})
+				anime({
+					targets: this.$refs['decorate'],
+					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: ''
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.containerone {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+</style>
\ No newline at end of file

src/templates/eqixrecruit/pages/eqixrecruitseven.vue

+<template>
+	<div class="containerone">
+
+		<div class="p-index main" id="con" style="zoom:3.385">
+
+			<div class="nr" id="nr" style="position: relative; width: 100%; height: 100%;">
+				<section class="main-page z-current" style="transition: transform 0.4s linear 0s; transform: translateY(0px);">
+					<div class="m-img" id="page7">
+						<div class="edit_wrapper" data-scene-id="407774">
+							<div id="wrapper-background4003896" style="width: 100%; height: 100%; background-color: rgb(255, 255, 255);"></div>
+							<ul eqx-edit-destroy="" id="edit_area4003896" paste-element="" class="edit_area weebly-content-area weebly-area-active" style="margin-top: 41.5px;">
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_436193737" num="1" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -28px; top: -69px; z-index: 2; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -28px; top: -69px; z-index: 2; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 1s ease 0s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="436193737" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_64168597" num="2" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -27px; top: -67px; z-index: 3; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -27px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 3; animation: 1.1s ease 0.1s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="64168597" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_9607648848" num="3" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -67px; z-index: 4; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 4; animation: 1.2s ease 0.2s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="9607648848" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_6213775181" num="4" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -27.5px; top: -67px; z-index: 5; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -27.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 5; animation: 1.3s ease 0.3s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="6213775181" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_3693892008" num="5" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -67px; z-index: 6; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 6; animation: 1.4s ease 0.4s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="3693892008" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_3136089527" num="6" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -68px; z-index: 7; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -68px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 7; animation: 1.5s ease 0.5s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="3136089527" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_374096666" num="7" ctype="4" comp-resize="" data-event="1120601" style="width: 379px; height: 766px; left: -28.5px; top: -158px; z-index: 8; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: -158px; left: -28.5px; width: 100%; height: 100%; z-index: 8; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.3s 1 normal both running puffIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="374096666" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/background.jpg" style="width: 519px; height: 766px; margin-top: 0px; margin-left: -70px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_7391621941" num="8" ctype="h" comp-resize="" data-event="1120601" style="width: 260px; height: 430px; left: 30px; top: 28px; z-index: 9; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 30px; top: 28px; z-index: 9; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(196, 67, 60); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.5s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="7391621941" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgba(255, 255, 255, 0.9);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_4168671212" num="9" ctype="h" comp-resize="" data-event="1120601" style="width: 145px; height: 29px; left: 87px; top: 40px; z-index: 10; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 87px; top: 40px; z-index: 10; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.8s 1 normal both running rollIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="4168671212" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_8392424590" num="10" ctype="2" comp-resize="" style="width: 128px; height: 40px; left: 96px; top: 34px; z-index: 11; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 34px; left: 96px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 16px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(255, 255, 255); z-index: 11; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="8392424590" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 128px; height: 40px;"><span style="font-size: 16px ;">{{getValue('eqixrecruit7head')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_6379614022" num="11" ctype="4" comp-resize="" data-event="1120601" style="width: 184px; height: 14px; left: 68.2375px; top: 434.718px; z-index: 12; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 434.718px; left: 68.2375px; width: 100%; height: 100%; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 12; animation: 2s ease 2.2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="6379614022" ctype="4" class="element comp_image editable-image" src="https://cdnoss.zhizuoh5.com/syspic/scene/o_1d44da6jr1tqk1nat1m4p7ik1h5pl.png?x-oss-process=style/w750&amp;t=1" style="width: 184.1px; height: 14px; margin-left: -0.05px; margin-top: 0px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_921320180" num="12" ctype="2" comp-resize="" style="width: 340px; height: 38px; left: -10px; top: 64px; z-index: 13; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 64px; left: -10px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); z-index: 13; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1.2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="921320180" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 38px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit7head2')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_8929421084" num="13" ctype="h" comp-resize="" data-event="1120601" style="width: 232px; height: 20px; left: 44px; top: 88px; z-index: 14; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 44px; top: 88px; z-index: 14; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 1.4s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 420 120" preserveAspectRatio="none" id="8929421084" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 60h420v1h-420v-1z" style="fill: rgb(186, 42, 33);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_1941792680" num="14" ctype="h" comp-resize="" data-event="1120601" style="width: 232px; height: 20px; left: 44px; top: 412px; z-index: 15; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 44px; top: 412px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 15; animation: 2s ease 2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 420 120" preserveAspectRatio="none" id="1941792680" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 60h420v1h-420v-1z" style="fill: rgb(186, 42, 33);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_5270170525" num="15" ctype="2" comp-resize="" style="width: 257px; height: 30px; left: 33px; top: 88px; z-index: 16; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 88px; left: 33px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: left; line-height: 1; font-size: 12px; font-weight: bold; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); z-index: 16; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1.6s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="5270170525" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 257px; height: 30px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit7head3')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_8977112344" num="16" ctype="2" comp-resize="" style="width: 257px; height: 86px; left: 33px; top: 112px; z-index: 17; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 112px; left: 33px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: left; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 17; animation: 2s ease 1.8s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="8977112344" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 257px; height: 86px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit7txt')}}<br>{{getValue('eqixrecruit7txt2')}}<br>{{getValue('eqixrecruit7txt3')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_9992608563" num="17" ctype="2" comp-resize="" style="width: 257px; height: 30px; left: 33px; top: 183px; z-index: 18; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 183px; left: 33px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: left; line-height: 1; font-size: 12px; font-weight: bold; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 18; animation: 2s ease 2s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="9992608563" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 257px; height: 30px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit7head4')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_6374767689" num="18" ctype="2" comp-resize="" style="width: 263px; height: 182px; left: 33px; top: 240px; z-index: 19; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 240px; left: 33px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: left; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 19; animation: 2s ease 2.4s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="6374767689" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 263px; height: 182px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit7txt4')}}<br>{{getValue('eqixrecruit7txt5')}}<br>{{getValue('eqixrecruit7txt6')}}<br>{{getValue('eqixrecruit7txt7')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_5586849247" num="19" ctype="2" comp-resize="" style="width: 257px; height: 30px; left: 33px; top: 214px; z-index: 20; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 214px; left: 33px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: left; line-height: 1; font-size: 12px; font-weight: bold; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 20; animation: 2s ease 2.2s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="5586849247" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 257px; height: 30px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit7head5')}}</span></div>
+										</div>
+									</div>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</section>
+			</div>
+
+		</div>
+
+	</div>
+</template>
+
+<script>
+	import methods from '../methods'
+	import anime from 'animejs/lib/anime.es.js'
+	import Scene from '@/framework/utils/sence'
+	export default {
+		name: 'retail',
+		props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
+		mixins: [methods],
+		components: {},
+		created() {
+			console.log(this.schemaData)
+		},
+		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['mlxg'],
+						translateX: 0,
+						opacity: 1,
+						duration: 2000
+					}).finished,
+					anime({
+						targets: this.$refs['title'],
+						translateX: 0,
+						opacity: 1,
+						delay: 1000,
+						duration: 500,
+						easing: 'easeInOutQuad'
+					}).finished,
+					anime({
+						targets: this.$refs['decorate'],
+						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() {
+				console.log('enterBefore')
+				anime({
+					targets: '#cd-image-1 circle',
+					duration: 0,
+					r: [0, 2920]
+				})
+				anime({
+					targets: this.$refs['mlxg'],
+					translateX: -1500,
+					opacity: 0,
+					duration: 0
+				})
+				anime({
+					targets: this.$refs['decorate'],
+					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: ''
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.containerone {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+</style>
\ No newline at end of file

src/templates/eqixrecruit/pages/eqixrecruitsix.vue

+<template>
+	<div class="containerone">
+
+		<div class="p-index main" id="con" style="zoom:3.385">
+
+			<div class="nr" id="nr" style="position: relative; width: 100%; height: 100%;">
+				<section class="main-page z-current" style="transition: transform 0.4s linear 0s; transform: translateY(0px);">
+					<div class="m-img" id="page6">
+						<div class="edit_wrapper" data-scene-id="407774">
+							<div id="wrapper-background4003895" style="width: 100%; height: 100%; background-color: rgb(255, 255, 255);"></div>
+							<ul eqx-edit-destroy="" id="edit_area4003895" paste-element="" class="edit_area weebly-content-area weebly-area-active" style="margin-top: 41.5px;">
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_1812058810" num="1" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -28px; top: -69px; z-index: 2; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -28px; top: -69px; z-index: 2; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 1s ease 0s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="1812058810" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_8044463049" num="2" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -27px; top: -67px; z-index: 3; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -27px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 3; animation: 1.1s ease 0.1s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="8044463049" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_3304432291" num="3" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -67px; z-index: 4; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 4; animation: 1.2s ease 0.2s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="3304432291" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_4705960607" num="4" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -27.5px; top: -67px; z-index: 5; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -27.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 5; animation: 1.3s ease 0.3s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="4705960607" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_705362852" num="5" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -67px; z-index: 6; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 6; animation: 1.4s ease 0.4s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="705362852" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_4065561306" num="6" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -68px; z-index: 7; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -68px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 7; animation: 1.5s ease 0.5s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="4065561306" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_1060486293" num="7" ctype="4" comp-resize="" data-event="1120601" style="width: 379px; height: 766px; left: -28.5px; top: -176px; z-index: 8; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: -176px; left: -28.5px; width: 100%; height: 100%; z-index: 8; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.3s 1 normal both running puffIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="1060486293" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/background.jpg" style="width: 520px; height: 766px; margin-top: 0px; margin-left: -70.5px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_4214599249" num="8" ctype="h" comp-resize="" data-event="1120601" style="width: 260px; height: 430px; left: 30px; top: 28px; z-index: 9; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 30px; top: 28px; z-index: 9; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(196, 67, 60); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.5s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="4214599249" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgba(255, 255, 255, 0.9);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_6230343505" num="9" ctype="h" comp-resize="" data-event="1120601" style="width: 145px; height: 29px; left: 87px; top: 40px; z-index: 10; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 87px; top: 40px; z-index: 10; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.8s 1 normal both running rollIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="6230343505" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_4235937116" num="10" ctype="2" comp-resize="" style="width: 128px; height: 40px; left: 95px; top: 34px; z-index: 11; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 34px; left: 95px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 16px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(255, 255, 255); z-index: 11; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="4235937116" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 128px; height: 40px;"><span style="font-size: 16px ;">{{getValue('eqixrecruit6head')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_7554148671" num="11" ctype="4" comp-resize="" data-event="1120601" style="width: 184px; height: 14px; left: 68.2375px; top: 434.718px; z-index: 12; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 434.718px; left: 68.2375px; width: 100%; height: 100%; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 12; animation: 2s ease 2.2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="7554148671" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/jiaru.jpg" style="width: 184.1px; height: 14px; margin-left: -0.05px; margin-top: 0px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_8928581819" num="12" ctype="2" comp-resize="" style="width: 340px; height: 30px; left: -10px; top: 62px; z-index: 13; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 62px; left: -10px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); z-index: 13; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1.2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="8928581819" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 30px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit6head2')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_4602857010" num="13" ctype="h" comp-resize="" data-event="1120601" style="width: 232px; height: 20px; left: 44px; top: 88px; z-index: 14; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 44px; top: 88px; z-index: 14; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 1.4s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 420 120" preserveAspectRatio="none" id="4602857010" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 60h420v1h-420v-1z" style="fill: rgb(186, 42, 33);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_1063956668" num="14" ctype="h" comp-resize="" data-event="1120601" style="width: 232px; height: 20px; left: 44px; top: 412px; z-index: 15; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 44px; top: 412px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 15; animation: 2s ease 2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 420 120" preserveAspectRatio="none" id="1063956668" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 60h420v1h-420v-1z" style="fill: rgb(186, 42, 33);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_5322378853" num="15" ctype="2" comp-resize="" style="width: 340px; height: 30px; left: -10px; top: 103.4px; z-index: 16; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 103.4px; left: -10px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); z-index: 16; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1.6s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="5322378853" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 30px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit6head3')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_860139929" num="16" ctype="h" comp-resize="" data-event="1120601" style="width: 215px; height: 33px; left: 52.5px; top: 140px; z-index: 17; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 52.5px; top: 140px; z-index: 17; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 1.8s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="860139929" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgba(0, 0, 0, 0);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_1693287754" num="17" ctype="h" comp-resize="" data-event="1120601" style="width: 215px; height: 33px; left: 52.5px; top: 186.6px; z-index: 18; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 52.5px; top: 186.6px; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 18; animation: 2s ease 2.2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="1693287754" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgba(0, 0, 0, 0);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_370484834" num="18" ctype="h" comp-resize="" data-event="1120601" style="width: 215px; height: 33px; left: 52.5px; top: 233.2px; z-index: 19; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 52.5px; top: 233.2px; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 19; animation: 2s ease 2.6s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="370484834" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgba(0, 0, 0, 0);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_7519548995" num="19" ctype="h" comp-resize="" data-event="1120601" style="width: 215px; height: 33px; left: 52.5px; top: 279.8px; z-index: 20; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 52.5px; top: 279.8px; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 20; animation: 2s ease 3s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="7519548995" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgba(0, 0, 0, 0);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_3336478009" num="20" ctype="h" comp-resize="" data-event="1120601" style="width: 215px; height: 33px; left: 52.5px; top: 326.4px; z-index: 21; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 52.5px; top: 326.4px; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 21; animation: 2s ease 3.4s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="3336478009" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgba(0, 0, 0, 0);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_9932362343" num="21" ctype="h" comp-resize="" data-event="1120601" style="width: 215px; height: 33px; left: 52.5px; top: 373px; z-index: 22; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 52.5px; top: 373px; opacity: 1; transform: none; text-align: left; border-width: 1px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 22; animation: 2s ease 3.8s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="9932362343" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgba(0, 0, 0, 0);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_5011643374" num="22" ctype="2" comp-resize="" style="width: 193px; height: 35px; left: 64px; top: 135px; z-index: 23; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 135px; left: 64px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); z-index: 23; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 2s 1 normal both running puffIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="5011643374" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 193px; height: 35px;"><span style="font-size: 14px ;">{{getValue('eqixrecruit6head4')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_7336224885" num="29" ctype="2" comp-resize="" style="width: 193px; height: 35px; left: 65px; top: 182px; z-index: 24; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 182px; left: 65px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 24; animation: 2s ease 2.4s 1 normal both running puffIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="7336224885" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 193px; height: 35px;"><span style="font-size: 14px ;">{{getValue('eqixrecruit6head5')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_6787724480" num="30" ctype="2" comp-resize="" style="width: 193px; height: 35px; left: 62px; top: 229px; z-index: 25; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 229px; left: 62px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 25; animation: 2s ease 2.8s 1 normal both running puffIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="6787724480" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 193px; height: 35px;"><span style="font-size: 14px ;">{{getValue('eqixrecruit6head6')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_5238793568" num="31" ctype="2" comp-resize="" style="width: 193px; height: 35px; left: 64px; top: 275px; z-index: 26; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 275px; left: 64px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 26; animation: 2s ease 3.2s 1 normal both running puffIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="5238793568" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 193px; height: 35px;"><span style="font-size: 14px ;">{{getValue('eqixrecruit6head7')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_2506051567" num="32" ctype="2" comp-resize="" style="width: 193px; height: 35px; left: 62px; top: 322px; z-index: 27; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 322px; left: 62px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 27; animation: 2s ease 3.6s 1 normal both running puffIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="2506051567" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 193px; height: 35px;"><span style="font-size: 14px ;">{{getValue('eqixrecruit6head8')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_1142376490" num="33" ctype="2" comp-resize="" style="width: 193px; height: 35px; left: 67px; top: 368px; z-index: 28; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 368px; left: 67px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 28; animation: 2s ease 4s 1 normal both running puffIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="1142376490" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 193px; height: 35px;"><span style="font-size: 14px ;">{{getValue('eqixrecruit6head9')}}</span></div>
+										</div>
+									</div>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</section>
+			</div>
+
+		</div>
+
+	</div>
+</template>
+
+<script>
+	import methods from '../methods'
+	import anime from 'animejs/lib/anime.es.js'
+	import Scene from '@/framework/utils/sence'
+	export default {
+		name: 'retail',
+		props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
+		mixins: [methods],
+		components: {},
+		created() {
+			console.log(this.schemaData)
+		},
+		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['mlxg'],
+						translateX: 0,
+						opacity: 1,
+						duration: 2000
+					}).finished,
+					anime({
+						targets: this.$refs['title'],
+						translateX: 0,
+						opacity: 1,
+						delay: 1000,
+						duration: 500,
+						easing: 'easeInOutQuad'
+					}).finished,
+					anime({
+						targets: this.$refs['decorate'],
+						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() {
+				console.log('enterBefore')
+				anime({
+					targets: '#cd-image-1 circle',
+					duration: 0,
+					r: [0, 2920]
+				})
+				anime({
+					targets: this.$refs['mlxg'],
+					translateX: -1500,
+					opacity: 0,
+					duration: 0
+				})
+				anime({
+					targets: this.$refs['decorate'],
+					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: ''
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.containerone {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+</style>
\ No newline at end of file

src/templates/eqixrecruit/pages/eqixrecruitthree.vue

+<template>
+	<div class="containerone">
+
+		<div class="p-index main" id="con" style="zoom:3.385">
+
+			<div class="nr" id="nr" style="position: relative; width: 100%; height: 100%;">
+				<section class="main-page z-current" style="transition: transform 0.4s linear 0s; transform: translateY(0px);">
+					<div class="m-img" id="page3">
+						<section class="u-arrow-bottom">
+							<div class="pre-wrap">
+								<div class="pre-box1">
+									<div class="pre1"></div>
+								</div>
+								<div class="pre-box2">
+									<div class="pre2"></div>
+								</div>
+							</div>
+						</section>
+						<div class="edit_wrapper" data-scene-id="407774">
+							<div id="wrapper-background4003892" style="width: 100%; height: 100%; background-color: rgb(255, 255, 255);"></div>
+							<ul eqx-edit-destroy="" id="edit_area4003892" paste-element="" class="edit_area weebly-content-area weebly-area-active" style="margin-top: 41.5px;">
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_9423202243" num="1" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -28px; top: -69px; z-index: 2; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -28px; top: -69px; z-index: 2; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 1s ease 0s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="9423202243" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_8731162004" num="2" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -27px; top: -67px; z-index: 3; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -27px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 3; animation: 1.1s ease 0.1s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="8731162004" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_2780596510" num="3" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -67px; z-index: 4; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 4; animation: 1.2s ease 0.2s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="2780596510" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_5589472166" num="4" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -27.5px; top: -67px; z-index: 5; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -27.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 5; animation: 1.3s ease 0.3s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="5589472166" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_1090148482" num="5" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -67px; z-index: 6; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 6; animation: 1.4s ease 0.4s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="1090148482" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_4040214958" num="6" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -68px; z-index: 7; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -68px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 7; animation: 1.5s ease 0.5s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="4040214958" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_5278992633" num="7" ctype="4" comp-resize="" data-event="1120601" style="width: 379px; height: 739px; left: -28.5px; top: -152px; z-index: 8; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: -152px; left: -28.5px; width: 100%; height: 100%; z-index: 8; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.3s 1 normal both running puffIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="5278992633" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/background.jpg" style="width: 502px; height: 739px; margin-top: 0px; margin-left: -61px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_7620899842" num="8" ctype="h" comp-resize="" data-event="1120601" style="width: 260px; height: 430px; left: 30px; top: 28px; z-index: 9; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 30px; top: 28px; z-index: 9; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(196, 67, 60); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.5s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="7620899842" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgba(255, 255, 255, 0.9);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_9594690435" num="9" ctype="h" comp-resize="" data-event="1120601" style="width: 145px; height: 29px; left: 87px; top: 40px; z-index: 10; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 87px; top: 40px; z-index: 10; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.8s 1 normal both running rollIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="9594690435" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_721664601" num="10" ctype="2" comp-resize="" style="width: 128px; height: 40px; left: 96px; top: 33px; z-index: 11; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 33px; left: 96px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 16px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(255, 255, 255); z-index: 11; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="721664601" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 128px; height: 40px;"><span style="font-size: 16px ;">{{getValue('eqixrecruit3head')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_1631944657" num="11" ctype="4" comp-resize="" data-event="1120601" style="width: 184px; height: 14px; left: 68.2375px; top: 434.718px; z-index: 12; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 434.718px; left: 68.2375px; width: 100%; height: 100%; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 12; animation: 2s ease 2.2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="1631944657" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/jiaru.jpg" style="width: 184.1px; height: 14px; margin-left: -0.05px; margin-top: 0px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_675099370" num="12" ctype="2" comp-resize="" style="width: 340px; height: 30px; left: -10px; top: 58px; z-index: 13; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 58px; left: -10px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); z-index: 13; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1.2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="675099370" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 30px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit3head2')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_2733005870" num="13" ctype="h" comp-resize="" data-event="1120601" style="width: 232px; height: 20px; left: 44px; top: 88px; z-index: 14; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 44px; top: 88px; z-index: 14; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 1.4s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 420 120" preserveAspectRatio="none" id="2733005870" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 60h420v1h-420v-1z" style="fill: rgb(186, 42, 33);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_2026871925" num="14" ctype="h" comp-resize="" data-event="1120601" style="width: 232px; height: 20px; left: 44px; top: 412px; z-index: 15; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 44px; top: 412px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 15; animation: 2s ease 2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 420 120" preserveAspectRatio="none" id="2026871925" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 60h420v1h-420v-1z" style="fill: rgb(186, 42, 33);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_145068293" num="15" ctype="2" comp-resize="" style="width: 340px; height: 38px; left: 36px; top: 168.4px; z-index: 16; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 168.4px; left: 36px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: left; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); z-index: 16; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1.8s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="145068293" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 38px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit3head3')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_1446157209" num="16" ctype="2" comp-resize="" style="width: 340px; height: 38px; left: 36px; top: 197.5px; z-index: 17; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 197.5px; left: 36px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: left; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 17; animation: 2s ease 2s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="1446157209" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 38px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit3head4')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_7145397144" num="17" ctype="2" comp-resize="" style="width: 340px; height: 38px; left: 36px; top: 230.4px; z-index: 18; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 230.4px; left: 36px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: left; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 18; animation: 2s ease 2.2s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="7145397144" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 38px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit3head5')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_2831262579" num="18" ctype="2" comp-resize="" style="width: 340px; height: 30px; left: 36px; top: 261.4px; z-index: 19; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 261.4px; left: 36px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: left; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 19; animation: 2s ease 2.4s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="2831262579" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 30px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit3head6')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_5161133795" num="19" ctype="2" comp-resize="" style="width: 340px; height: 30px; left: 36px; top: 292.4px; z-index: 20; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 292.4px; left: 36px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: left; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 20; animation: 2s ease 2.6s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="5161133795" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 30px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit3head7')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_1670718075" num="20" ctype="2" comp-resize="" style="width: 340px; height: 30px; left: 36px; top: 323.4px; z-index: 21; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 323.4px; left: 36px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: left; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 21; animation: 2s ease 2.8s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="1670718075" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 30px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit3head8')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_1933429985" num="21" ctype="2" comp-resize="" style="width: 340px; height: 38px; left: 36px; top: 354.4px; z-index: 22; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 354.4px; left: 36px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: left; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 22; animation: 2s ease 3s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="1933429985" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 38px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit3head9')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_2319016610" num="22" ctype="2" comp-resize="" style="width: 340px; height: 30px; left: 36px; top: 385.4px; z-index: 23; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 385.4px; left: 36px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: left; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 23; animation: 2s ease 3.2s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="2319016610" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 30px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit3head10')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_1785062736" num="23" ctype="4" comp-resize="" data-event="1120601" style="width: 224px; height: 54px; left: 48.2571px; top: 105.75px; z-index: 24; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 105.75px; left: 48.2571px; width: 100%; height: 100%; z-index: 24; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 1.6s 1 normal both running flipInY;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="1785062736" ctype="4" class="element comp_image editable-image" :src="getValue('eqixrecruit3img')" style="width: 224px; height: 126px; margin-top: -36px; margin-left: 0px;"></div>
+									</div>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</section>
+			</div>
+
+		</div>
+
+	</div>
+</template>
+
+<script>
+	import methods from '../methods'
+	import anime from 'animejs/lib/anime.es.js'
+	import Scene from '@/framework/utils/sence'
+	export default {
+		name: 'retail',
+		props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
+		mixins: [methods],
+		components: {},
+		created() {
+			console.log(this.schemaData)
+		},
+		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['mlxg'],
+						translateX: 0,
+						opacity: 1,
+						duration: 2000
+					}).finished,
+					anime({
+						targets: this.$refs['title'],
+						translateX: 0,
+						opacity: 1,
+						delay: 1000,
+						duration: 500,
+						easing: 'easeInOutQuad'
+					}).finished,
+					anime({
+						targets: this.$refs['decorate'],
+						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() {
+				console.log('enterBefore')
+				anime({
+					targets: '#cd-image-1 circle',
+					duration: 0,
+					r: [0, 2920]
+				})
+				anime({
+					targets: this.$refs['mlxg'],
+					translateX: -1500,
+					opacity: 0,
+					duration: 0
+				})
+				anime({
+					targets: this.$refs['decorate'],
+					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: ''
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.containerone {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+</style>
\ No newline at end of file

src/templates/eqixrecruit/pages/eqixrecruittwo.vue

+<template>
+	<div class="containerone">
+		<div class="p-index main" id="con" style="zoom:3.385">
+
+			<div class="nr" id="nr" style="position: relative; width: 100%; height: 100%;">
+				<div id="loading" class="loading" style="display: none;">
+					<div class="noCustomLogo">
+						<div class="loading-tip">欢迎制作易企秀</div>
+					</div>
+				</div>
+				<div class="eqx-progress-bar" style="display: none;"><span style="width: 32px;"></span><em class="page-tip">1/10</em></div>
+				<section class="main-page z-current" style="transition: transform 0.4s linear 0s; transform: translateY(0px);">
+					<div class="m-img" id="page2">
+						
+						<div class="edit_wrapper" data-scene-id="407774">
+							<div id="wrapper-background4003891" style="width: 100%; height: 100%; background-color: rgb(255, 255, 255);"></div>
+							<ul eqx-edit-destroy="" id="edit_area4003891" paste-element="" class="edit_area weebly-content-area weebly-area-active" style="margin-top: 41.5px;">
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_7015597528" num="1" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -28px; top: -69px; z-index: 1; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -28px; top: -69px; z-index: 1; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 1s ease 0s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="7015597528" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_7682998086" num="2" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -27px; top: -67px; z-index: 3; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -27px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 3; animation: 1.1s ease 0.1s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="7682998086" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_310001899" num="3" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -67px; z-index: 4; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 4; animation: 1.2s ease 0.2s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="310001899" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_8011858531" num="4" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -27.5px; top: -67px; z-index: 5; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -27.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 5; animation: 1.3s ease 0.3s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="8011858531" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_308805467" num="5" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -67px; z-index: 6; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -67px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 6; animation: 1.4s ease 0.4s 1 normal both running fadeInLeft;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="308805467" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_2601991335" num="6" ctype="h" comp-resize="" data-event="1120601" style="width: 375px; height: 622px; left: -26.5px; top: -68px; z-index: 7; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: -26.5px; top: -68px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 7; animation: 1.5s ease 0.5s 1 normal both running fadeInRight;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="2601991335" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(255, 255, 255);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_8299722155" num="7" ctype="4" comp-resize="" data-event="1120601" style="width: 383px; height: 735px; left: -28.5px; top: -142px; z-index: 8; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: -142px; left: -28.5px; width: 100%; height: 100%; z-index: 8; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.3s 1 normal both running puffIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="8299722155" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/background.jpg" style="width: 498px; height: 735px; margin-top: 0px; margin-left: -57.5px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_8778146288" num="8" ctype="h" comp-resize="" data-event="1120601" style="width: 260px; height: 430px; left: 30px; top: 28px; z-index: 9; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 30px; top: 28px; z-index: 9; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(196, 67, 60); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.5s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="8778146288" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgba(255, 255, 255, 0.9);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_6758870666" num="9" ctype="h" comp-resize="" data-event="1120601" style="width: 145px; height: 29px; left: 87px; top: 40px; z-index: 10; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 87px; top: 40px; z-index: 10; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 0.8s 1 normal both running rollIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="6758870666" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" preserveAspectRatio="none" class="element svg-element">
+												<rect fill="#08A1EF" width="64" height="64" style="fill: rgb(186, 42, 33);"></rect>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_2229788940" num="10" ctype="2" comp-resize="" style="width: 128px; height: 40px; left: 96px; top: 33px; z-index: 11; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 33px; left: 96px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 16px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(255, 255, 255); z-index: 11; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="2229788940" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 128px; height: 40px;"><span style="font-size: 16px ;">{{getValue('eqixrecruit2head')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_3809068569" num="11" ctype="4" comp-resize="" data-event="1120601" style="width: 235px; height: 144px; left: 42.5935px; top: 107.73px; z-index: 12; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 107.73px; left: 42.5935px; width: 100%; height: 100%; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(186, 42, 33); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 12; animation: 2s ease 1.7s 1 normal both running flipInY;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="3809068569" ctype="4" class="element comp_image editable-image" :src="getValue('eqixrecruit2img')" style="width: 255px; height: 144px; margin-top: 0px; margin-left: -10.5px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-image" id="inside_7947846802" num="12" ctype="4" comp-resize="" data-event="1120601" style="width: 184px; height: 14px; left: 68.2375px; top: 434.718px; z-index: 13; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 434.718px; left: 68.2375px; width: 100%; height: 100%; color: rgb(103, 103, 103); opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 13; animation: 2s ease 2.2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;"><img id="7947846802" ctype="4" class="element comp_image editable-image" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/eqixrecruit/jiaru.jpg" style="width: 184.1px; height: 14px; margin-left: -0.05px; margin-top: 0px;"></div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_5174687126" num="13" ctype="2" comp-resize="" style="width: 340px; height: 30px; left: -10px; top: 59px; z-index: 14; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 59px; left: -10px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: center; line-height: 1; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); z-index: 14; opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; animation: 2s ease 1.2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="5174687126" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 340px; height: 30px;"><span style="font-size: 12px ;">{{getValue('eqixrecruit2head')}}</span></div>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_8595419615" num="14" ctype="h" comp-resize="" data-event="1120601" style="width: 232px; height: 20px; left: 44px; top: 87px; z-index: 15; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 44px; top: 87px; z-index: 15; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; animation: 2s ease 1.4s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 420 120" preserveAspectRatio="none" id="8595419615" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 60h420v1h-420v-1z" style="fill: rgb(186, 42, 33);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-shape" id="inside_9697545321" num="15" ctype="h" comp-resize="" data-event="1120601" style="width: 232px; height: 20px; left: 44px; top: 412px; z-index: 16; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="color: rgb(85, 85, 85); width: 100%; height: 100%; left: 44px; top: 412px; opacity: 1; transform: none; text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 16; animation: 2s ease 2s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%; position: relative;">
+											<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" width="100%" viewBox="0 0 420 120" preserveAspectRatio="none" id="9697545321" class="element svg-element">
+												<path fill="rgb( 0, 190, 255 )" d="M0 60h420v1h-420v-1z" style="fill: rgb(186, 42, 33);"></path>
+											</svg>
+										</div>
+									</div>
+								</li>
+								<li comp-drag="" comp-rotate="" class="comp-resize comp-rotate inside wsite-text" id="inside_6499566446" num="16" ctype="2" comp-resize="" style="width: 257px; height: 159px; left: 32px; top: 257.4px; z-index: 17; transform: rotateZ(0deg);">
+									<div class="element-box" element-anim="" style="top: 257.4px; left: 32px; width: 100%; height: 100%; writing-mode: horizontal-tb; text-align: justify; line-height: 0.8; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(186, 42, 33); opacity: 1; transform: none; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; z-index: 17; animation: 2s ease 1.9s 1 normal both running zoomIn;">
+										<div class="element-box-contents" style="width: 100%; height: 100%;">
+											<div id="6499566446" ctype="2" class="element comp_paragraph editable-text" style="cursor: default; width: 257px; height: 159px;"><span style="font-size: 12px;">{{getValue('introduction')}}</span></div>
+										</div>
+									</div>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</section>
+			</div>
+
+		</div>
+	</div>
+</template>
+
+<script>
+	import methods from '../methods'
+	import anime from 'animejs/lib/anime.es.js'
+	import Scene from '@/framework/utils/sence'
+	export default {
+		name: 'eqixxdky',
+		props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
+		mixins: [methods],
+		components: {},
+		created() {
+			console.log(this.schemaData)
+		},
+		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['mlxg'],
+						translateX: 0,
+						opacity: 1,
+						duration: 2000
+					}).finished,
+					anime({
+						targets: this.$refs['title'],
+						translateX: 0,
+						opacity: 1,
+						delay: 1000,
+						duration: 500,
+						easing: 'easeInOutQuad'
+					}).finished,
+					anime({
+						targets: this.$refs['decorate'],
+						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() {
+				console.log('enterBefore')
+				anime({
+					targets: '#cd-image-1 circle',
+					duration: 0,
+					r: [0, 2920]
+				})
+				anime({
+					targets: this.$refs['mlxg'],
+					translateX: -1500,
+					opacity: 0,
+					duration: 0
+				})
+				anime({
+					targets: this.$refs['decorate'],
+					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: ''
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.containerone {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+</style>
\ No newline at end of file

src/templates/eqixrecruit/pages/index.js

+const req = require.context('', false, /\.vue$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const pages = requireAll(req)
+const re = /\.\/(.*)\.vue/
+// console.log(req.keys(), 'requireContext')
+const pagesObj = {}
+pages.map((item, index) => {
+//	console.log(req.keys()[index].match(re)[1])
+  pagesObj[req.keys()[index].match(re)[1]] = item.default
+  return item
+})
+export default pagesObj

src/templates/eqixrecruit/sceneData.js

+export default {
+  schemaData: {},
+  itemList: []
+}

src/templates/eqixrecruit/schema/noticeSchema.js

+export default {}

src/templates/eqixrecruit/schema/scheduleSchema.js

+export default {}

src/templates/eqixrecruit/schema/welcomSchema.js

+export default {}

src/templates/eqixrecruit/schemaData.js

+
+import defaultData from './defaultData'
+import itemList from './itemList'
+import templateInfo from './templateInfo'
+export default {
+  templateInfo,
+  // defaultData,
+  pageList: [
+    {
+      name: '易企秀1',
+      thumb: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailone.jpg',
+      component: 'eqixrecruit',
+      defaultData: defaultData.retail,
+      schemaData: defaultData.eqixrecruit,
+      itemList: itemList.eqixrecruit
+    },
+    {
+      name: '易企秀2',
+      thumb: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
+      component: 'eqixrecruittwo',
+      defaultData: defaultData.retail,
+      schemaData: defaultData.eqixrecruittwo,
+      itemList: itemList.eqixrecruittwo
+    },
+    {
+      name: '易企秀3',
+      thumb: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
+      component: 'eqixrecruitthree',
+      defaultData: defaultData.retail,
+      schemaData: defaultData.eqixrecruitthree,
+      itemList: itemList.eqixrecruitthree
+    },
+    {
+      name: '易企秀4',
+      thumb: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
+      component: 'eqixrecruitfour',
+      defaultData: defaultData.retail,
+      schemaData: defaultData.eqixrecruitfour,
+      itemList: itemList.eqixrecruitfour
+    },
+    {
+      name: '易企秀5',
+      thumb: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
+      component: 'eqixrecruitfive',
+      defaultData: defaultData.retail,
+      schemaData: defaultData.eqixrecruitfive,
+      itemList: itemList.eqixrecruitfive
+    },
+    {
+      name: '易企秀6',
+      thumb: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
+      component: 'eqixrecruitsix',
+      defaultData: defaultData.retail,
+      schemaData: defaultData.eqixrecruitsix,
+      itemList: itemList.eqixrecruitsix
+    },
+    {
+      name: '易企秀7',
+      thumb: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
+      component: 'eqixrecruitseven',
+      defaultData: defaultData.retail,
+      schemaData: defaultData.eqixrecruitseven,
+      itemList: itemList.eqixrecruitseven
+    }
+  ]
+}

src/templates/eqixrecruit/templateInfo.js

+export default {
+  name: '企业文化模板'
+}