retail

src/templates/companyCulture/defaultData/index.js

+import welcome from './welcome'
+import notice from './notice'
+import schedule from './schedule'
+export default {
+  welcome,
+  notice,
+  schedule
+}

src/templates/companyCulture/defaultData/notice.js

+export default {
+  companyLogo: {
+    value: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo1.png'
+  },
+  companyName: {
+    value: '迈动互联（北京）信息科技有限公司'
+  },
+  noticeTitle: {
+    value: '2019年端午节放假通知'
+  },
+  noticeContent: {
+    value: '根据国家2019年部分节假日安排，结合公司实际情况，劳动节放假时间安排如下：2019年6月7日至6月9日放假，共3天。6月10（星期一）上班。\r\n注意事项：\r\n 1、放假期间，请各部门自行妥善安排好放假前工作，做好安全防范措施。\r\n2、放假期间外出的员工，请注意人身财产安全.\r\n \r\n \r\n       \t   特此通知，请知悉。'
+  },
+  noticeNickName: {
+    value: 'Dear All：'
+  }
+}

src/templates/companyCulture/defaultData/schedule.js

+export default {
+  companyLogo: {
+    value: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo1.png'
+  },
+  companyName: {
+    value: '迈动互联（北京）信息科技有限公司'
+  },
+  scheduleList: [
+    {
+      content: '龙湖地产来访',
+      address: '22-1会议室',
+      department: '智慧营销',
+      time: '09:30 AM -12:00 AM',
+      index: 1,
+      schemaIndex: 0
+    },
+    {
+      content: 'Vmatrix研发进度',
+      address: '21-03会议室',
+      department: '数字理想',
+      time: '09:30 AM -10:00 AM',
+      index: 2,
+      schemaIndex: 0
+    },
+    {
+      content: '数字理想前端面试',
+      address: '22-1会议室',
+      department: '数字理想',
+      time: '09:30 AM -12:00 AM',
+      index: 3,
+      schemaIndex: 0
+    },
+    {
+      content: '销售总监面试',
+      address: '22-1会议室',
+      department: '总经办',
+      time: '09:30 AM -12:00 AM',
+      index: 4,
+      schemaIndex: 0
+    }
+  ]
+}

src/templates/companyCulture/defaultData/welcome.js

+export default {
+  companyLogo: {
+    value: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo1.png'
+  },
+  companyName: {
+    value: '迈动互联（北京）信息科技有限公司'
+  },
+  companyNameEn: {
+    value: 'MAXROCKY'
+  },
+  welcomeWordZh: {
+    value: '欢迎龙湖信息中心领导参观指导'
+  },
+  welcomeWordEn: {
+    value: 'WELCOME'
+  }
+}

src/templates/companyCulture/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/companyCulture/index.vue

+<template>
+  <swiper :options="swiperOption"
+          :class="'glob-container'"
+          ref="mySwiper"
+          @someSwiperEvent="callback"
+          style="width:1920px;height:1080px;">
+    <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'
+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/companyCulture/itemList/index.js

+import welcome from './welcome'
+import notice from './notice'
+import schedule from './schedule'
+
+export default {
+  welcome,
+  notice,
+  schedule
+}

src/templates/companyCulture/itemList/notice.js

+export default [
+  {
+    type: 'image',
+    name: '企业logo',
+    description: '请上传png格式企业logo',
+    dataKey: 'companyLogo',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '企业名称',
+    description: '',
+    valueRule: '',
+    dataKey: 'companyName'
+  },
+  {
+    type: 'text',
+    name: '通知标题',
+    valueRule: '',
+    description: '请输入通知标题',
+    dataKey: 'noticeTitle'
+
+  },
+  {
+    type: 'text',
+    name: '通知昵称',
+    valueRule: '',
+    description: '请输入通知昵称',
+    dataKey: 'noticeNickName'
+  },
+  {
+    type: 'text',
+    name: '通知内容',
+    valueRule: '',
+    description: '请输入通知内容',
+    dataKey: 'noticeContent'
+
+  }
+]

src/templates/companyCulture/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/companyCulture/itemList/welcome.js

+export default [
+  {
+    type: 'image',
+    name: '企业logo',
+    description: '请上传png格式企业logo',
+    dataKey: 'companyLogo',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '企业名称',
+    description: '',
+    valueRule: '',
+    dataKey: 'companyName'
+  },
+  {
+    type: 'text',
+    name: '中文企业欢迎语',
+    description: '请输入企业欢迎语',
+    dataKey: 'welcomeWordZh'
+
+  },
+  {
+    type: 'text',
+    name: '英文企业欢迎语',
+    description: '请输入企业英文欢迎语',
+    valueRule: '',
+    dataKey: 'welcomeWordEn'
+
+  },
+  {
+    type: 'text',
+    name: '企业英文名称',
+    description: '请输入企业英文名称',
+    valueRule: '',
+    dataKey: 'companyNameEn'
+  }
+]

src/templates/companyCulture/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/companyCulture/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/companyCulture/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) => {
+  pagesObj[req.keys()[index].match(re)[1]] = item.default
+  return item
+})
+export default pagesObj

src/templates/companyCulture/pages/introduction.vue

+<template>
+  <div class="container">
+    <div class="logo">
+      <img
+        src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
+        alt
+      />
+    </div>
+    <div class="title">企业简介——迈动互联（北京）信息科技有限公司</div>
+    <div class="bottom-list">
+      <div class="bottom-item">
+        <div class="cover cover-yellow">
+          <img
+            src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/whoBg.png"
+            alt
+          />
+        </div>
+        <div class="cover-name">WHO</div>
+        <div class="icon">
+          <img
+            src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/tuandui.png"
+            alt
+          />
+          <div class="name">WHO ARE WE</div>
+          <div class="name-zh">我们是谁</div>
+        </div>
+      </div>
+      <div class="bottom-item">
+        <div class="cover cover-purple">
+           <img
+            src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/productBg.png"
+            alt
+          />
+        </div>
+        <div class="cover-name">Product</div>
+        <div class="icon">
+          <img
+            src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/product.png"
+            alt
+          />
+          <div class="name">WHO ARE WE</div>
+          <div class="name-zh">我们的产品</div>
+        </div>
+      </div>
+      <div class="bottom-item">
+        <div class="cover cover-green">
+          <img
+            src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/honourBg.png"
+            alt
+          />
+        </div>
+        <div class="cover-name">Honour</div>
+        <div class="icon">
+          <img
+            src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/honour.png"
+            alt
+          />
+          <div class="name">WHO ARE WE</div>
+          <div class="name-zh">我们的荣誉</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import methods from '../methods'
+export default {
+  name: 'introduction',
+  props: ['list', 'page', 'isEditMode', 'cancelEdit'],
+  mixins: [methods],
+  created () {
+    // console.log(this.list);
+  },
+  mounted () {},
+  data () {
+    return {
+      currentIndex: '',
+      date: '2019.07.04',
+      img: '',
+      currentIndex: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@keyframes cover {
+  0% {
+    width: 416px;
+    height: 542px;
+    animation: cover;
+    // opacity: 0.17;
+    background-size: contain;
+    transform-origin: 416px 542px;
+    transform: rotateY(0deg) skewY(0deg);
+  }
+  100% {
+    width: 300px;
+    height: 458px;
+    animation: cover;
+    // opacity: 0.17;
+    border-radius: 12px;
+    background-size: contain;
+    transform-origin: 300px 458px;
+    transform: rotateY(-45deg) skewY(20deg);
+  }
+}
+.container {
+  position: relative;
+  margin: 0 auto;
+  color: white;
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 1920px;
+  height: 1080px;
+  background: #dcdcdc
+    url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/bgs.png")
+    no-repeat top left;
+  background-size: 100%;
+  .logo {
+    position: absolute;
+    top: 50px;
+    left: 101px;
+    img {
+      width: 156px;
+      height: 50px;
+    }
+  }
+  .title {
+    font-size: 45px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    color: rgba(49, 49, 49, 1);
+    position: absolute;
+    top: 150px;
+    margin: 0 auto;
+    width: 100%;
+    text-align: center;
+  }
+  .bottom-list {
+    position: absolute;
+    display: flex;
+    top: 443px;
+    padding-left: 223px;
+    .bottom-item {
+      width: 416px;
+      height: 542px;
+      background: rgba(246, 246, 246, 1);
+      box-shadow: 0px 44px 63px 0px rgba(31, 31, 31, 0.15);
+      border-radius: 12px;
+      position: relative;
+      margin-right: 117px;
+      .icon {
+        // position: absolute;
+        padding-left: 42px;
+        padding-top: 52px;
+        left: 42px;
+        top: 52px;
+        img {
+          height: 53px;
+        }
+      }
+      .name {
+        margin-top: 36px;
+        height: 16px;
+        font-size: 16px;
+        font-family: ShreeDev0714-Bold;
+        font-weight: bold;
+        color: rgba(77, 77, 77, 1);
+      }
+      .name-zh {
+        margin-top: 87px;
+        height: 39px;
+        font-size: 39px;
+        line-height: 1;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: rgba(59, 59, 59, 1);
+      }
+      .cover-name {
+        position: absolute;
+        right: 30px;
+        top: -40px;
+        z-index: 111;
+        color: rgba(255, 255, 255, 1);
+        font-style: italic;
+        font-size: 39px;
+        font-weight: bold;
+        display: none;
+      }
+      .cover {
+        z-index: 2;
+        position: absolute;
+        right: 0px;
+        // top: -50px;
+        // width: 300px;
+        // height: 458px;
+        // animation: cover 3s;
+        // animation-delay: 1s;
+        // opacity: 0.17;
+        img {
+          width: 245px;
+          height: 608px;
+        }
+        width: 245px;
+        height: 608px;
+        top: -145px;
+
+        border-radius: 12px;
+        background-size: contain;
+        // background-color: #ed9d68;
+        transition: all 1s;
+        // transform: rotateY(-45deg) skewY(20deg);
+        transform-origin: 300px 458px;
+      }
+      // .cover-purple {
+      //   background-color: #9650e1;
+      // }
+      // .cover-green {
+      //   background-color: #84e8ce;
+      // }
+    }
+  }
+}
+</style>

src/templates/companyCulture/pages/notice.vue

+<template>
+  <!-- animated bgliner -->
+  <div class="container">
+    <!-- <div class="light"></div> -->
+    <div class="light-left"></div>
+    <div class="logo">
+      <img :src="getValue('companyLogo')"
+           alt />
+    </div>
+    <div class="ani sanjiaoBg"
+         swiper-animate-effect="slideInRight"
+         swiper-animate-duration="0.5s"
+         swiper-animate-delay="0s"></div>
+
+    <div class="title">{{getValue('companyName')}}</div>
+    <div class="en_name"
+         swiper-animate-effect="my-pulse"
+         swiper-animate-duration="3s"
+         swiper-animate-delay="1s">
+      <div class="left-word  "
+           swiper-animate-effect="fadeInLeftBig"
+           swiper-animate-duration="3s"
+           swiper-animate-delay="1s">Information</div>
+    </div>
+    <div class="ani zh_name"
+         swiper-animate-effect="zoomIn"
+         swiper-animate-duration="1s"
+         swiper-animate-delay="1s">
+      <div class="right-word">消息</div>
+    </div>
+    <div class="ani"
+         swiper-animate-effect="fadeIn"
+         swiper-animate-duration="1s"
+         swiper-animate-delay=".5s">
+      <div class="container-notice">
+        <div class="ani notice-content"
+             swiper-animate-effect="fadeIn"
+             swiper-animate-duration="1s"
+             swiper-animate-delay=".5s">
+          <div class="notice-title">{{getValue('noticeTitle')}}</div>
+          <div class="dear">{{getValue('noticeNickName')}}</div>
+          <div class="content-html"
+               v-html="getValue('noticeContent').replace(/\n/g, '<br>').replace(/ /g, '&nbsp;')
+
+">
+            <!-- 根据国家2019年部分节假日安排，结合公司实际情况，劳动节放假时间安排如下：2019年6月7日至6月9日放假，共3天。6月10（星期一）上班。
+        <br />注意事项：
+        <br />1、放假期间，请各部门自行妥善安排好放假前工作，做好安全防范措施。
+            <br />2、放假期间外出的员工，请注意人身财产安全.-->
+            <textarea :value="getValue(4)"
+                      id
+                      cols="30"
+                      rows="10"></textarea>
+            <div class="tips">特此通知，请知悉。</div>
+          </div>
+          <!-- <textarea :value="getValue(4)" id="" cols="30" rows="10"></textarea> -->
+        </div>
+      </div>
+    </div>
+
+    <div class="time-info">
+      <date></date>
+    </div>
+  </div>
+</template>
+
+<script>
+import methods from '../methods'
+import Date from '@/framework/components/Date/index'
+import Scene from '@/framework/utils/sence'
+import { enter, leave } from '../keyframe'
+export default {
+  name: 'notice',
+  props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
+  mixins: [methods],
+  components: {
+    Date
+  },
+  created () {
+    // console.log(this.list);
+  },
+  methods: {
+    enter,
+    leave,
+    enterAfter () {
+      this.timer = setTimeout(() => {
+        Scene.leaveBefore()
+        clearTimeout(this.timer)
+      }, 10000)
+    }
+  },
+  mounted () {},
+  destroyed () {
+    clearTimeout(this.timer)
+  },
+  data () {
+    return {
+      currentIndex: '',
+      date: '2019.07.04',
+      img: '',
+      currentIndex: '',
+      keyframes: [
+        {
+          el: '.sanjiaoBg',
+          style: {
+            opacity: 0,
+            translateX: '2000px'
+          },
+          options: {
+            delay: 0,
+            duration: 0
+          },
+          enterBefore: {
+            style: {
+              opacity: 0,
+              translateX: '2000px'
+            },
+            options: {
+              delay: 0,
+              duration: 0
+            }
+          },
+          enter: {
+            style: {
+              opacity: 1,
+              translateX: '0px'
+            },
+            options: {
+              delay: 0,
+              duration: 1000
+            }
+          },
+          leave: {
+            style: {
+              opacity: 0,
+              translateX: '2000px'
+            },
+            options: {
+              delay: 1000,
+              duration: 1000
+            }
+          }
+        },
+        {
+          el: '.container-notice',
+          style: {
+            opacity: 0
+          },
+          options: {
+            delay: 0,
+            duration: 0
+          },
+          enterBefore: {
+            style: {
+              opacity: 0
+            },
+            options: {
+              delay: 0,
+              duration: 0
+            }
+          },
+          enter: {
+            style: {
+              opacity: 1
+            },
+            options: {
+              delay: 1000,
+              duration: 1000
+            }
+          },
+          leave: {
+            style: {},
+            options: {}
+          }
+        },
+        {
+          el: '.en_name .left-word',
+          enterBefore: {
+            style: {
+              opacity: 0,
+              translateX: '-2000px'
+            },
+            options: {
+              delay: 0,
+              duration: 0
+            }
+          },
+          enter: {
+            style: {
+              opacity: 1,
+              translateX: '0px'
+            },
+            options: {
+              delay: 1000,
+              duration: 1000
+            }
+          },
+          leave: {
+            style: {},
+            options: {}
+          }
+        },
+        {
+          el: '.zh_name',
+          enterBefore: {
+            style: {
+              opacity: 0,
+              scale: '0.3'
+            },
+            options: {
+              delay: 0,
+              duration: 0
+            }
+          },
+          enter: {
+            style: {
+              opacity: 1,
+              scale: '1'
+            },
+            options: {
+              delay: 2000,
+              duration: 1000
+            }
+          },
+          leave: {
+            style: {},
+            options: {}
+          }
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@keyframes cover {
+  0% {
+    width: 416px;
+    height: 542px;
+    animation: cover;
+    // opacity: 0.17;
+    background-size: contain;
+    transform-origin: 416px 542px;
+    transform: rotateY(0deg) skewY(0deg);
+  }
+  100% {
+    width: 300px;
+    height: 458px;
+    animation: cover;
+    // opacity: 0.17;
+    border-radius: 12px;
+    background-size: contain;
+    transform-origin: 300px 458px;
+    transform: rotateY(-45deg) skewY(20deg);
+  }
+}
+@keyframes bgliner {
+  0% {
+    background: linear-gradient(to bottom, #ff1e00, #290a59);
+  }
+  25% {
+    background: linear-gradient(to bottom, #eb2d13, #6a1edb);
+  }
+  50% {
+    background: linear-gradient(to bottom, #771205, #5113af);
+  }
+  75% {
+    background: linear-gradient(to bottom, #ff1e00ab, #39028a);
+  }
+  100% {
+    background: linear-gradient(to bottom, #e72107, #390d7a);
+  }
+}
+@keyframes my-pulse {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 0.15;
+  }
+  50% {
+    -webkit-transform: scale(0.2);
+    transform: scale(0.95);
+    opacity: 0.01;
+  }
+  to {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 0.15;
+  }
+}
+.my-pulse {
+  animation-name: my-pulse;
+}
+// .animated {
+//   // animation-direction: 2s;
+// }
+.bgliner {
+  animation-name: bgliner;
+  transition: all 0.5s;
+  animation-delay: 2s;
+  animation-duration: 10s;
+}
+.container {
+  position: relative;
+  margin: 0 auto;
+  color: white;
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 1920px;
+  height: 1080px;
+  background: linear-gradient(to bottom, #10125f, #407d63);
+  background-size: 100%;
+  .light-left {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1920px;
+    height: 1080px;
+    background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/lightNotice.png")
+      no-repeat top left;
+    background-size: 100%;
+  }
+  // .light {
+  //   position: absolute;
+  //   left: 0;
+  //   top: 0;
+  //   width: 1920px;
+  //   height: 1080px;
+  //   background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/light.png")
+  //     no-repeat top left;
+  //   background-size: 100%;
+  // }
+  .logo {
+    position: absolute;
+    top: 50px;
+    left: 101px;
+    img {
+      width: 156px;
+      height: 31px;
+    }
+    &::after {
+      content: "";
+      background: #36145e;
+      width: 1px;
+      height: 72px;
+      position: absolute;
+      left: -20px;
+    }
+  }
+  .en_name {
+    position: absolute;
+    bottom: 20px;
+    left: 100px;
+    right: 150px;
+    font-size: 208px;
+    text-align: right;
+    letter-spacing: 0;
+    line-height: 1;
+    font-family: DINCondensed-Bold;
+    font-weight: bold;
+    color: white;
+    opacity: 0.15;
+    .right-word {
+      text-align: right;
+    }
+  }
+  .zh_name {
+    position: absolute;
+    bottom: 46px;
+    left: 100px;
+    right: 150px;
+    font-size: 121px;
+    letter-spacing: 20px;
+    text-align: right;
+    line-height: 1;
+    font-family: PingFang;
+    font-weight: bold;
+    color: rgba(255, 255, 255, 1);
+    .right-word {
+      // text-align: right;
+      // padding-top: 80px;
+    }
+  }
+  .sanjiaoBg {
+    width: 1279px;
+    height: 1080px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/sanjiaoNotice.png")
+      no-repeat top left;
+    background-size: 100%;
+  }
+  .container-notice {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1920px;
+    height: 1080px;
+    background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/rectBg.png")
+      no-repeat top left;
+    background-size: 100%;
+    z-index: 10;
+  }
+  .notice-content {
+    margin-top: 181px;
+    margin-left: 221px;
+    box-sizing: border-box;
+    padding-top: 70px;
+    width: 1504px;
+    height: 693px;
+    position: relative;
+    text-align: left;
+    z-index: 11;
+
+    .notice-title {
+      text-align: right;
+      font-size: 47px;
+      line-height: 1;
+      position: absolute;
+      right: 173px;
+      font-weight: 100;
+      color: rgba(255, 255, 255, 1);
+      &::after {
+        content: "";
+        background: white;
+        width: 1px;
+        height: 49px;
+        position: absolute;
+        right: -40px;
+        top: 0;
+      }
+    }
+    .dear {
+      position: absolute;
+      top: 193px;
+      left: 146px;
+      font-size: 36px;
+    }
+    .content-html {
+      position: absolute;
+      top: 250px;
+      text-align: justify;
+      left: 146px;
+      width: 1226px;
+      font-size: 24px;
+      line-height: 1.6;
+    }
+    .tips {
+      padding-top: 100px;
+      padding-left: 70px;
+    }
+  }
+  .title {
+    font-size: 23px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    // color: #405e9d;
+    color: #161616;
+    position: absolute;
+    top: 95px;
+    left: 101px;
+    margin: 0 auto;
+    // width: 100%;
+    text-align: center;
+  }
+  .time-info {
+    position: absolute;
+    bottom: 50px;
+    left: 81px;
+    font-size: 22px;
+    color: white;
+  }
+}
+</style>

src/templates/companyCulture/pages/photoWall.vue

+<template>
+  <div class="container">
+    <div class="logo">
+      <img
+        src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
+        alt
+      />
+    </div>
+    <div class="title">照片墙</div>
+    <div class="photo-container">
+      <div class="photo-wall">
+        <div class="wall">
+          <div class="wall-3">
+            <swiper :options="swiperOption" style="width: 2476px;transform: translateX(-1200px);">
+              <swiperSlide v-for="(item,index) in 10" :key="index">
+                <img
+                  src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
+                  alt
+                />
+              </swiperSlide>
+            </swiper>
+          </div>
+          <div class="wall-1">
+            <!-- <swiper :options="swiperOption" style="width: 2476px; transform: translateX(-1267px);">
+              <swiperSlide v-for="(item,index) in 10" :key="index">
+                <img
+                  src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
+                  alt
+                />
+              </swiperSlide>
+            </swiper> -->
+          </div>
+          <div class="wall-2">
+            <!-- <swiper :options="swiperOption" style="width: 2476px;transform: translateX(-1867px);">
+              <swiperSlide v-for="(item,index) in 10" :key="index">
+                <img
+                  src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
+                  alt
+                />
+              </swiperSlide>
+            </swiper> -->
+            <!-- <swiper :options="swiperOption">
+               <img v-for="(item,index) in 10" :key="index"
+                  src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
+                  alt
+                />
+            <!-- </swiper>-->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import methods from '../methods'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+export default {
+  name: 'photoWall',
+  props: ['list', 'page', 'isEditMode', 'cancelEdit'],
+  mixins: [methods],
+  created () {
+    // console.log(this.list);
+  },
+  components: {
+    swiper,
+    swiperSlide
+  },
+  mounted () {},
+  data () {
+    return {
+      currentIndex: '',
+      date: '2019.07.04',
+      img: '',
+      currentIndex: '',
+      swiperOption: {
+        observerParents: true,
+        allowTouchMove: false,
+        slidesPerView: 'auto',
+        slidesPerColumn: 2,
+        spaceBetween: 30,
+        speed: 1000,
+        freeMode: true,
+        // reverseDirection: true,
+        autoplay: {
+          reverseDirection: true,
+          delay: 10
+        },
+        loop: true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  .swiper-slide {
+    width: auto;
+  }
+  position: relative;
+  margin: 0 auto;
+  color: white;
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 1920px;
+  height: 1080px;
+  background: #dcdcdc
+    url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/bgs.png")
+    no-repeat top left;
+  background-size: 100%;
+  .logo {
+    position: absolute;
+    top: 50px;
+    left: 101px;
+    img {
+      width: 156px;
+      height: 50px;
+    }
+  }
+  .title {
+    font-size: 45px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    color: rgba(49, 49, 49, 1);
+    position: absolute;
+    top: 150px;
+    margin: 0 auto;
+    width: 100%;
+    text-align: center;
+  }
+  .photo-container {
+    position: absolute;
+    // display: flex;
+    top: 343px;
+    height: 600px;
+    width: 100%;
+    perspective: 2000px;
+    .photo-wall {
+      // transform-style: preserve-3d;
+      .wall {
+        width: 100%;
+        height: 800px;
+        position: relative;
+
+        right: 0;
+        top: 0;
+        left: 0;
+        // margin-left: 1200px;
+        // padding-left: 800px;
+        transform-style: preserve-3d;
+        // perspective: 10000px;
+        .wall-1 {
+          left: 1200px;
+          line-height: 300px;
+          position: absolute;
+          overflow: hidden;
+          transform: rotateY(-45deg) translateY(0) translateX(-300px);
+          width: 600px;
+          height: 600px;
+          background: #000;
+          img {
+            transform: rotateY(-45deg) translateY(0);
+            height: 100px;
+            width: auto;
+            margin-right: 100px;
+            // border: 1px solid red;
+          }
+          overflow: hidden;
+        }
+        .wall-2 {
+          overflow: hidden;
+          line-height: 300px;
+          left: 1200px;
+          position: absolute;
+          transform: rotateY(45deg) translateX(300px) translateY(0);
+          // transform-origin: 0 0;
+          width: 600px;
+          height: 600px;
+          background: #000;
+          img {
+            transform: rotateY(45deg) translateY(0);
+            height: 100px;
+            width: auto;
+            margin-right: 100px;
+          }
+        }
+        .wall-3 {
+          overflow: hidden;
+          position: absolute;
+          left: -200px;
+          top: 0;
+          height: 600px;
+          line-height: 300px;
+          // background: #000;
+          z-index: 10;
+          width: 1276px;
+          transform: translateZ(-424px);
+          img {
+            transform: translateZ(-424px);
+            height: 100px;
+            width: auto;
+            margin-right: 100px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style>
+.swiper-container-free-mode > .swiper-wrapper {
+   -webkit-transition-timing-function: linear; /*之前是ease-out*/
+   -moz-transition-timing-function: linear;
+   -ms-transition-timing-function: linear;
+   -o-transition-timing-function: linear;
+   transition-timing-function: linear;
+   margin: 0 auto;
+}
+</style>

src/templates/companyCulture/pages/schedule.vue

+<template>
+  <!-- animated bgliner -->
+  <div class="container">
+    <!-- <div class="light"></div> -->
+    <div class="light-left"></div>
+    <div class="logo">
+      <img :src="getValue('companyLogo')" />
+    </div>
+    <div
+      class="ani sanjiaoBg"
+      swiper-animate-effect="slideInRight"
+      swiper-animate-duration="0.5s"
+      swiper-animate-delay="0s"
+    ></div>
+
+    <div class="title">{{getValue('companyName')}}</div>
+    <div
+      class="en_name"
+      swiper-animate-effect="my-pulse"
+      swiper-animate-duration="3s"
+      swiper-animate-delay="1s"
+    >
+      <div
+        class="left-word"
+        swiper-animate-effect="fadeInLeftBig"
+        swiper-animate-duration="3s"
+        swiper-animate-delay="1s"
+      >Daily Events</div>
+    </div>
+    <div
+      class="ani zh_name"
+      swiper-animate-effect="zoomIn"
+      swiper-animate-duration="1s"
+      swiper-animate-delay="1s"
+    >
+      <div class="right-word">日程安排</div>
+    </div>
+    <div
+      class="ani"
+      swiper-animate-effect="fadeIn"
+      swiper-animate-duration="1s"
+      swiper-animate-delay=".5s"
+    >
+      <div class="container-schedule">
+        <div
+          class="ani schedule-content"
+          swiper-animate-effect="fadeIn"
+          swiper-animate-duration="1s"
+          swiper-animate-delay=".5s"
+        >
+          <div class="schedule-item item-title">
+            <div class="item-td">
+              内容
+              <span class="en">Events</span>
+            </div>
+            <div class="item-td">
+              地点
+              <span class="en">Location</span>
+            </div>
+            <div class="item-td">
+              部门
+              <span class="en">Department</span>
+            </div>
+            <div class="item-td">
+              时间
+              <span class="en">Time</span>
+            </div>
+          </div>
+          <transition-group
+            v-on:before-enter="TbeforeEnter"
+            v-on:enter="Tenter"
+            v-on:leave="Tleave"
+            v-bind:css="false"
+            tag="ul"
+          >
+            <div v-for="(item, index) in computeListData" :key="item.id" :data-index="index">
+              <!-- :style="{
+              'transition-delay':( index + 1) * 200 + 'ms'
+              }"-->
+              <div
+                class="ani schedule-item"
+                swiper-animate-effect="slideInRight"
+                swiper-animate-duration="1s"
+                :swiper-animate-delay="2  + ( index + 1) * 200 + 'ms'"
+              >
+                <div class="item-td">{{item.content}}</div>
+                <div class="item-td">{{item.address}}</div>
+                <div class="item-td">{{item.department}}</div>
+                <div class="item-td">{{item.time}}</div>
+              </div>
+            </div>
+          </transition-group>
+        </div>
+      </div>
+    </div>
+    <div class="time-info">
+      <date></date>
+    </div>
+  </div>
+</template>
+
+<script>
+import methods from '../methods'
+import Date from '@/framework/components/Date/index'
+import Scene from '@/framework/utils/sence'
+import { enter, leave } from '../keyframe'
+
+export default {
+  name: 'schedule',
+  props: ['schemaData', 'page', 'isEditMode', 'cancelEdit', 'activeIndex'],
+  mixins: [methods],
+  components: {
+    Date
+  },
+  watch: {
+    schemaData: function () {
+      this.listData = this.schemaData.scheduleList
+    }
+  },
+  created () {
+    // console.log(this.list);
+    this.listData = this.schemaData.scheduleList
+    setInterval(() => {
+      this.listData = this.schemaData.scheduleList
+      if (this.activeIndex === this.page && !this.isEditMode) {
+        this.listData = JSON.parse(JSON.stringify(this.listData))
+      }
+    }, 8000)
+  },
+  mounted () {
+  },
+  destroyed () {
+    clearTimeout(this.timer)
+  },
+  data () {
+    return {
+      currentIndex: '',
+      date: '2019.07.04',
+      img: '',
+      currentIndex: '',
+      listData: [
+        {
+          content: '龙湖地产来访',
+          address: '22-1会议室',
+          department: '智慧营销',
+          time: '09:30 AM -12:00 AM',
+          index: 1
+        },
+        {
+          content: 'Vmatrix研发进度',
+          address: '21-03会议室',
+          department: '数字理想',
+          time: '09:30 AM -10:00 AM',
+          index: 2
+        },
+        {
+          content: '数字理想前端面试',
+          address: '22-1会议室',
+          department: '数字理想',
+          time: '09:30 AM -12:00 AM',
+          index: 3
+        },
+        {
+          content: '销售总监面试',
+          address: '22-1会议室',
+          department: '总经办',
+          time: '09:30 AM -12:00 AM',
+          index: 4
+        }
+      ],
+      keyframes: [
+        {
+          el: '.sanjiaoBg',
+          style: {
+            opacity: 0,
+            translateX: '2000px'
+          },
+          options: {
+            delay: 0,
+            duration: 0
+          },
+          enterBefore: {
+            style: {
+              opacity: 0,
+              translateX: '2000px'
+            },
+            options: {
+              delay: 0,
+              duration: 0
+            }
+          },
+          enter: {
+            style: {
+              opacity: 1,
+              translateX: '0px'
+            },
+            options: {
+              delay: 0,
+              duration: 1000
+            }
+          },
+          leave: {
+            style: {
+              opacity: 0,
+              translateX: '2000px'
+            },
+            options: {
+              delay: 1000,
+              duration: 1000
+            }
+          }
+        },
+        {
+          el: '.container-schedule',
+          style: {
+            opacity: 0
+          },
+          options: {
+            delay: 0,
+            duration: 0
+          },
+          enterBefore: {
+            style: {
+              opacity: 0
+            },
+            options: {
+              delay: 0,
+              duration: 0
+            }
+          },
+          enter: {
+            style: {
+              opacity: 1
+            },
+            options: {
+              delay: 1000,
+              duration: 1000
+            }
+          },
+          leave: {
+            style: {},
+            options: {}
+          }
+        },
+        {
+          el: '.en_name .left-word',
+          enterBefore: {
+            style: {
+              opacity: 0,
+              translateX: '-2000px'
+            },
+            options: {
+              delay: 0,
+              duration: 0
+            }
+          },
+          enter: {
+            style: {
+              opacity: 1,
+              translateX: '0px'
+            },
+            options: {
+              delay: 500,
+              duration: 1000
+            }
+          },
+          leave: {
+            style: {},
+            options: {}
+          }
+        },
+        // {
+        //   el: ".schedule-item",
+        //   enterBefore: {
+        //     style: {
+        //       opacity: 0,
+        //       translateX: "2000px"
+        //     },
+        //     options: {
+        //       delay: 0,
+        //       duration: 0
+        //     }
+        //   },
+        //   enter: {
+        //     style: {
+        //       opacity: 1,
+        //       translateX: "0px"
+        //     },
+        //     options: {
+        //       delay: 500,
+        //       duration: 1000
+        //     }
+        //   },
+        //   leave: {
+        //     style: {},
+        //     options: {}
+        //   }
+        // },
+        {
+          el: '.zh_name',
+          enterBefore: {
+            style: {
+              opacity: 0,
+              scale: '0.3'
+            },
+            options: {
+              delay: 0,
+              duration: 0
+            }
+          },
+          enter: {
+            style: {
+              opacity: 1,
+              scale: '1'
+            },
+            options: {
+              delay: 2000,
+              duration: 1000
+            }
+          },
+          leave: {
+            style: {},
+            options: {}
+          }
+        }
+      ]
+    }
+  },
+  computed: {
+    computeListData () {
+      return this.listData.map((item, index) => {
+        var obj = {}
+        var random = parseInt(Math.random() * 1000)
+        // console.log(random);
+        obj.id = random
+        // console.log({...item,...obj})
+        return { ...item, ...obj }
+      })
+    }
+  },
+  methods: {
+    enter,
+    leave,
+    enterAfter () {
+      this.timer = setTimeout(() => {
+        Scene.leaveBefore()
+        clearTimeout(this.timer)
+      }, 10000)
+    },
+    TbeforeEnter (el) {
+      el.style.opacity = 0
+      $.Velocity(
+        el,
+        {
+          opacity: 0,
+          rotateX: '-180deg'
+        },
+        {
+          duration: 0
+        }
+      )
+      // el.style.transform = 'rotateX(-180deg)'
+    },
+    Tenter (el, done) {
+      window.$.Velocity(
+        el,
+        { opacity: 1, rotateX: '0deg' },
+        { duration: 1000, delay: el.dataset.index * 250, easing: 'easeInSine' }
+      )
+    },
+    Tleave (el, done) {
+      window.$.Velocity(
+        el,
+        {
+          opacity: 0
+        },
+        { complete: done }
+      )
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@keyframes cover {
+  0% {
+    width: 416px;
+    height: 542px;
+    animation: cover;
+    // opacity: 0.17;
+    background-size: contain;
+    transform-origin: 416px 542px;
+    transform: rotateY(0deg) skewY(0deg);
+  }
+  100% {
+    width: 300px;
+    height: 458px;
+    animation: cover;
+    // opacity: 0.17;
+    border-radius: 12px;
+    background-size: contain;
+    transform-origin: 300px 458px;
+    transform: rotateY(-45deg) skewY(20deg);
+  }
+}
+@keyframes bgliner {
+  0% {
+    background: linear-gradient(to bottom, #ff1e00, #290a59);
+  }
+  25% {
+    background: linear-gradient(to bottom, #eb2d13, #6a1edb);
+  }
+  50% {
+    background: linear-gradient(to bottom, #771205, #5113af);
+  }
+  75% {
+    background: linear-gradient(to bottom, #ff1e00ab, #39028a);
+  }
+  100% {
+    background: linear-gradient(to bottom, #e72107, #390d7a);
+  }
+}
+@keyframes my-pulse {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 0.15;
+  }
+  50% {
+    -webkit-transform: scale(0.2);
+    transform: scale(0.95);
+    opacity: 0.01;
+  }
+  to {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 0.15;
+  }
+}
+.my-pulse {
+  animation-name: my-pulse;
+}
+// .animated {
+//   // animation-direction: 2s;
+// }
+.bgliner {
+  animation-name: bgliner;
+  transition: all 0.5s;
+  animation-delay: 2s;
+  animation-duration: 10s;
+}
+.container {
+  position: relative;
+  margin: 0 auto;
+  color: white;
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 1920px;
+  height: 1080px;
+  background: linear-gradient(to bottom, #10125f, #407d63);
+  background-size: 100%;
+  .light-left {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1920px;
+    height: 1080px;
+    background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/lightNotice.png")
+      no-repeat top left;
+    background-size: 100%;
+  }
+  .logo {
+    position: absolute;
+    top: 50px;
+    left: 101px;
+    img {
+      width: 156px;
+      height: 31px;
+    }
+    &::after {
+      content: "";
+      background: #36145e;
+      width: 1px;
+      height: 72px;
+      position: absolute;
+      left: -20px;
+    }
+  }
+  .en_name {
+    position: absolute;
+    bottom: 20px;
+    left: 100px;
+    right: 150px;
+    font-size: 208px;
+    text-align: right;
+    letter-spacing: 0;
+    line-height: 1;
+    font-family: DINCondensed-Bold;
+    font-weight: bold;
+    color: white;
+    opacity: 0.15;
+    .right-word {
+      text-align: right;
+    }
+  }
+  .zh_name {
+    position: absolute;
+    bottom: 46px;
+    left: 100px;
+    right: 150px;
+    font-size: 121px;
+    letter-spacing: 20px;
+    text-align: right;
+    line-height: 1;
+    font-family: PingFang;
+    font-weight: bold;
+    color: rgba(255, 255, 255, 1);
+    .right-word {
+      // text-align: right;
+      // padding-top: 80px;
+    }
+  }
+  .sanjiaoBg {
+    width: 1279px;
+    height: 1080px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/sanjiaoNotice.png")
+      no-repeat top left;
+    background-size: 100%;
+  }
+  .container-schedule {
+    position: absolute;
+    top: 200px;
+    left: 221px;
+    width: 1504px;
+    z-index: 10;
+  }
+  .schedule-content {
+    box-sizing: border-box;
+    position: relative;
+    text-align: left;
+    z-index: 11;
+
+    .item-title {
+      font-size: 36px !important;
+      .en {
+        font-size: 24px;
+        vertical-align: text-bottom;
+      }
+      .item-td {
+        &::after {
+          top: 15px !important;
+        }
+      }
+    }
+    .schedule-item {
+      box-sizing: border-box;
+      display: flex;
+      transition: all 1s;
+      align-items: center;
+      margin-bottom: 8px;
+      background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/12.png")
+        no-repeat center;
+      background-size: cover;
+
+      height: 132px;
+      font-size: 24px;
+      .item-td {
+        padding-left: 69px;
+        box-sizing: border-box;
+        width: 340px;
+        overflow: hidden;
+        position: relative;
+        &:last-child::after {
+          display: none;
+        }
+        &::after {
+          content: "";
+          position: absolute;
+          right: 0;
+          top: 20%;
+          width: 1px;
+          height: 24px;
+          background: white;
+        }
+        &:last-child::after {
+          display: none;
+        }
+      }
+    }
+  }
+  .title {
+    font-size: 23px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    // color: #405e9d;
+    color: #161616;
+    position: absolute;
+    top: 95px;
+    left: 101px;
+    margin: 0 auto;
+    // width: 100%;
+    text-align: center;
+  }
+  .time-info {
+    position: absolute;
+    bottom: 50px;
+    left: 81px;
+    font-size: 22px;
+    color: white;
+  }
+}
+</style>
+<style scoped>
+.slide-fade-enter-active {
+  transform: rotateX(0deg);
+  transition: all 1s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0s;
+}
+.slide-fade-enter, .slide-fade-leave-to
+/* .slide-fade-leave-active for below version 2.1.8 */ {
+  transform: rotateX(-180deg);
+  opacity: 0;
+}
+</style>

src/templates/companyCulture/pages/welcome.vue

+<template>
+  <!-- animated bgliner -->
+  <div class="container infinite">
+    <div class="light"></div>
+    <div class="light-left"></div>
+    <div class="logo"
+         @click="eventChange">
+      <img :src="getValue('companyLogo')"
+           alt />
+    </div>
+    <div class="ani sanjiaoBg"
+         swiper-animate-effect="fadeInRightBig"
+         swiper-animate-duration="0.5s"
+         swiper-animate-delay="0s"></div>
+    <div class="title">{{getValue('companyName')}}</div>
+    <div class="ani en_name infinite"
+         swiper-animate-effect="pulse"
+         swiper-animate-duration="3s"
+         swiper-animate-delay="2s">
+      <div class="ani left-word"
+           swiper-animate-effect="fadeInLeftBig"
+           swiper-animate-duration="1s"
+           swiper-animate-delay="0.5s">{{getValue('welcomeWordEn')}}</div>
+      <div ref="def"
+           class="ani right-word"
+           swiper-animate-effect="fadeInleft"
+           swiper-animate-duration="1s"
+           swiper-animate-delay="0.5s">{{getValue('companyNameEn')}}</div>
+    </div>
+    <div class="ani zh_name"
+         swiper-animate-effect="zoomIn"
+         swiper-animate-duration="1s"
+         swiper-animate-delay="1s">
+      <div ref="abc"
+           class="left-word">{{getValue('welcomeWordZh')}}</div>
+      <!-- <div class="right-word">{{getValue('welcomeWordZh').slice(10,20)}}</div> -->
+    </div>
+    <div class="time-info">
+      <date></date>
+    </div>
+  </div>
+</template>
+
+<script>
+import methods from '../methods'
+import Date from '@/framework/components/Date/index'
+import Scene from '@/framework/utils/sence'
+import { enter, leave } from '../keyframe'
+export default {
+  name: 'welcome',
+  props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
+  mixins: [methods],
+  components: {
+    Date
+  },
+  created () {
+    // console.log(this.list);
+  },
+  mounted () {
+    // this.enter((countEnterTime) => {
+    //   this.timer = setTimeout(() => {
+    //     Scene.enterAfter({
+    //       nextDuration: 10000,
+    //       page: this.page
+    //     });
+    //   }, countEnterTime);
+    // }).then(res => {
+    //   console.log(res)
+    // }).catch(err => {
+    //   console.log(err)
+    // } )
+  },
+  entering () {
+    console.log(this)
+    $.velocity(this.$refs['abc'])
+    return new promise()
+  },
+  innerAnimationStart () {
+    sence.eventBus.emit('pageDone')
+  },
+  innerAnimationEnd () {
+
+  },
+  leave () {
+
+  },
+  destroyed () {
+    clearTimeout(this.timer)
+  },
+  methods: {
+    eventChange () {
+      Scene.EventBus.emit('change', { aa: 12 })
+      // this.leave();
+    },
+    enter,
+    leave,
+    enterAfter () {
+      this.timer = setTimeout(() => {
+        Scene.leaveBefore()
+        clearTimeout(this.timer)
+      }, 10000)
+    }
+  },
+  data () {
+    return {
+      currentIndex: '',
+      date: '2019.07.04',
+      img: '',
+      currentIndex: '',
+      keyframes: [
+        {
+          el: '.sanjiaoBg',
+          style: {
+            opacity: 0,
+            translateX: '2000px'
+          },
+          options: {
+            delay: 0,
+            duration: 0
+          },
+          enterBefore: {
+            style: {
+              opacity: 0,
+              translateX: '2000px'
+            },
+            options: {
+              delay: 0,
+              duration: 0
+            }
+          },
+          enter: {
+            style: {
+              opacity: 1,
+              translateX: '0px'
+            },
+            options: {
+              delay: 0,
+              duration: 1000
+            }
+          },
+          leave: {
+            style: {
+              opacity: 0,
+              translateX: '2000px'
+            },
+            options: {
+              delay: 1000,
+              duration: 1000
+            }
+          }
+        },
+        {
+          el: '.en_name',
+          style: {
+            opacity: 0,
+            scale: '0.3'
+          },
+          options: {
+            delay: 2000,
+            duration: 3000
+          },
+          enterBefore: {
+            style: {
+              opacity: 0,
+              scale: '0.3'
+            },
+            options: {
+              delay: 2000,
+              duration: 3000
+            }
+          },
+          enter: {
+            style: {
+              opacity: 0.15,
+              scale: 1
+            },
+            options: {
+              delay: 2000,
+              duration: 3000,
+              loop: true
+            }
+          },
+          leave: {
+            style: {},
+            options: {}
+          }
+        },
+        {
+          el: '.en_name .left-word',
+          style: {
+            opacity: 0,
+            translateX: '-2000px'
+          },
+          options: {
+            delay: 0,
+            duration: 0
+          },
+          enterBefore: {
+            style: {
+              opacity: 0,
+              translateX: '-2000px'
+            },
+            options: {
+              delay: 0,
+              duration: 0
+            }
+          },
+          enter: {
+            style: {
+              opacity: 1,
+              translateX: '0px'
+            },
+            options: {
+              delay: 500,
+              duration: 1000
+            }
+          },
+          leave: {
+            style: {},
+            options: {}
+          }
+        },
+        {
+          el: '.en_name .right-word',
+          style: {
+            opacity: 0,
+            translateX: '2000px'
+          },
+          options: {
+            delay: 0,
+            duration: 0
+          },
+          enterBefore: {
+            style: {
+              opacity: 0,
+              translateX: '2000px'
+            },
+            options: {
+              delay: 0,
+              duration: 0
+            }
+          },
+          enter: {
+            style: {
+              opacity: 1,
+              translateX: '0px'
+            },
+            options: {
+              delay: 500,
+              duration: 1000
+            }
+          },
+          leave: {
+            style: {},
+            options: {}
+          }
+        },
+        {
+          el: '.zh_name',
+          style: {
+            opacity: 0,
+            scale: '0.3'
+          },
+          options: {
+            delay: 0,
+            duration: 0
+          },
+          enterBefore: {
+            style: {
+              opacity: 0,
+              scale: '0.3'
+            },
+            options: {
+              delay: 0,
+              duration: 0
+            }
+          },
+          enter: {
+            style: {
+              opacity: 1,
+              scale: '1'
+            },
+            options: {
+              delay: 3000,
+              duration: 1000
+            }
+          },
+          leave: {
+            style: {},
+            options: {}
+          }
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@keyframes cover {
+  0% {
+    width: 416px;
+    height: 542px;
+    animation: cover;
+    // opacity: 0.17;
+    background-size: contain;
+    transform-origin: 416px 542px;
+    transform: rotateY(0deg) skewY(0deg);
+  }
+  100% {
+    width: 300px;
+    height: 458px;
+    animation: cover;
+    // opacity: 0.17;
+    border-radius: 12px;
+    background-size: contain;
+    transform-origin: 300px 458px;
+    transform: rotateY(-45deg) skewY(20deg);
+  }
+}
+@keyframes bgliner {
+  0% {
+    background: linear-gradient(to bottom, #ff1e00, #290a59);
+  }
+  25% {
+    background: linear-gradient(to bottom, #eb2d13, #6a1edb);
+  }
+  50% {
+    background: linear-gradient(to bottom, #771205, #5113af);
+  }
+  75% {
+    background: linear-gradient(to bottom, #ff1e00ab, #39028a);
+  }
+  100% {
+    background: linear-gradient(to bottom, #e72107, #390d7a);
+  }
+}
+@keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 0.15;
+  }
+  50% {
+    -webkit-transform: scale(0.2);
+    transform: scale(0.95);
+    opacity: 0.01;
+  }
+  to {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 0.15;
+  }
+}
+.pulse {
+  animation-name: pulse;
+}
+.animated {
+  animation-direction: 2s;
+}
+.bgliner {
+  animation-name: bgliner;
+  transition: all 0.5s;
+  animation-delay: 2s;
+  animation-duration: 10s;
+}
+.container {
+  position: relative;
+  margin: 0 auto;
+  color: white;
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 1920px;
+  height: 1080px;
+  background: linear-gradient(to bottom, #ff1e00, #290a59);
+  background-size: 100%;
+  .light-left {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1920px;
+    height: 1080px;
+    background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/leftLight.png")
+      no-repeat top left;
+    background-size: 100%;
+  }
+  .light {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1920px;
+    height: 1080px;
+    background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/light.png")
+      no-repeat top left;
+    background-size: 100%;
+  }
+  .logo {
+    position: absolute;
+    top: 50px;
+    left: 101px;
+    img {
+      width: 156px;
+      height: 31px;
+    }
+    &::after {
+      content: "";
+      background: #36145e;
+      width: 1px;
+      height: 72px;
+      position: absolute;
+      left: -20px;
+    }
+  }
+  .en_name {
+    position: absolute;
+    top: 279px;
+    left: 100px;
+    right: 142px;
+    font-size: 300px;
+    letter-spacing: 0;
+    line-height: 0.82;
+    font-family: DINCondensed-Bold;
+    font-weight: bold;
+    color: white;
+    opacity: 0.15;
+    .right-word {
+      // margin-top: -50px;
+      text-align: right;
+    }
+  }
+  .zh_name {
+    position: absolute;
+    top: 320px;
+    left: 140px;
+    right: 140px;
+    font-size: 143px;
+    letter-spacing: 20px;
+    text-align: center;
+    line-height: 240px;
+    word-break: break-word;
+    font-family: DINCondensed-Bold;
+    font-weight: normal;
+    color: rgba(255, 255, 255, 1);
+    .right-word {
+      // text-align: right;
+      padding-top: 80px;
+    }
+  }
+
+  .sanjiaoBg {
+    width: 1279px;
+    height: 1080px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/sanjiao.png")
+      no-repeat top left;
+    background-size: 100%;
+  }
+  .title {
+    font-size: 23px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    // color: #405e9d;
+    color: #161616;
+    position: absolute;
+    top: 95px;
+    left: 101px;
+    margin: 0 auto;
+    // width: 100%;
+    text-align: center;
+  }
+  .time-info {
+    position: absolute;
+    bottom: 50px;
+    left: 81px;
+    font-size: 22px;
+    color: white;
+  }
+}
+</style>

src/templates/companyCulture/schema/noticeSchema.js

+export default {}

src/templates/companyCulture/schema/scheduleSchema.js

+export default {}

src/templates/companyCulture/schema/welcomSchema.js

+export default {}

src/templates/companyCulture/templateInfo.js

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

src/templates/listingInformation/defaultData/buyingHouse.js

+export default {
+  houseList: [
+    {
+      img: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png'
+    },
+    {
+      img: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg'
+    }
+  ],
+  title: {
+    value: '合租 | 彩虹新城·两室两厅·精装修·南'
+  },
+  price: {
+    value: '3000'
+  },
+  brightOneName: {
+    value: '面积(m²)'
+  },
+  brightOneContent: {
+    value: '80m²'
+  },
+  brightTwoName: {
+    value: '位置'
+  },
+  brightTwoContent: {
+    value: '大兴·枣园'
+  },
+  brightThreeName: {
+    value: '楼层'
+  },
+  brightThreeContent: {
+    value: '3/10'
+  },
+  peripheralFacilities1: {
+    value: '地铁四号线枣园站 260米'
+  },
+  peripheralFacilities2: {
+    value: '物美大卖场 300米'
+  },
+  peripheralFacilities3: {
+    value: '康庄公园 800米'
+  },
+  peripheralFacilities4: {
+    value: '仁和医院 900米'
+  }
+
+}

src/templates/listingInformation/defaultData/index.js

+import buyingHouse from './buyingHouse'
+import rentHouse from './rentHouse'
+export default {
+  buyingHouse,
+  rentHouse
+}
+/**
+ * 默认数据入口
+ */

src/templates/listingInformation/defaultData/readme.md

+## 默认数据入口
\ No newline at end of file

src/templates/listingInformation/defaultData/rentHouse.js

+export default {}

src/templates/listingInformation/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/listingInformation/index.vue

+<template>
+  <div class="glob-container">
+    <swiper
+      :options="swiperOption"
+      ref="mySwiper"
+      class
+      @someSwiperEvent="callback"
+      style="width:1920px;height:1080px;"
+    >
+      <swiper-slide
+        style="transform: translate3d(0,0,0)"
+        class="ani"
+        v-for="(page, index) in pages"
+        :key="index"
+      >
+        <component
+          :is="page.component"
+          :ref="'child'+index"
+          @hook:mounted="loaded(index)"
+          v-if="index === sliderActiveIndex"
+          :schemaData="pages[index].schemaData"
+          :isEditMode="isEditMode"
+          :cancelEdit.sync="cancelEdit"
+          :page="index"
+          :activeIndex="sliderActiveIndex"
+        ></component>
+      </swiper-slide>
+    </swiper>
+    <div class="decoration"></div>
+
+    <svg viewBox="0 0 1920 1080" class="svg-filters">
+      <title>Animated clip-path SVG</title>
+      <defs>
+        <filter id="ant" x="0" y="0" width="1" height="1">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
+
+          <clipPath id="cd-image-122">
+            <circle id="cd-circle-1" cx="1920" cy="1080" r="1920" />
+          </clipPath>
+        </filter>
+        <clipPath id="cd-image-1" clipPathUnits="userSpaceOnUse">
+          <circle id="cd-circle-1" cx="0" cy="1080" r="2920" />
+        </clipPath>
+        <mask id="mask-img-1" maskContentUnits="objectBoundingBox">
+          <circle id="cd-circle-12" fill="black" cx="0" cy="0" r="1000" />
+        </mask>
+      </defs>
+
+      <!-- <image height="800px"
+             width="1400px"
+             clip-path="url(#cd-image-1)"
+             mask="mask-img-1"
+      xlink:href="http://ue.qzone.qq.com/janilydemo/mask/clippath/img.jpg"></image>-->
+    </svg>
+  </div>
+</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 } from 'timers'
+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: {
+    loaded (index) {
+      if (!this.isEditMode) {
+        setTimeout(() => {
+          this.$refs['child' + this.sliderActiveIndex][0].enter().then(() => {
+            console.log(index, 'enter 完毕')
+          })
+        }, 1000)
+      }
+    },
+    message (data) {
+      // 发送消息
+      Message.send(data, '*')
+    },
+    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 () {
+  },
+  created () {
+    if (getQuery('isEdit')) {
+      this.isEditMode = true
+    } else {
+      Scene.EventBus.on('leaveBefore', e => {
+        console.log('leaveBefore')
+        if (this.pages.length > 1) {
+          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, 0, false)
+          })
+        }
+      })
+      this.isEditMode = false
+    }
+    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), 1000, false)
+      }
+    })
+    this.swiperOption = {
+      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); // 隐藏动画元素 todo
+            // swiperAnimate(this); // 初始化完成开始动画 todo
+          }
+        },
+        slideChange () {
+          vm.sliderActiveIndex = this.realIndex
+          if (vm.isEditMode) {
+            // $(".ani").css("visibility", "");
+          }
+        },
+        slideChangeTransitionEnd () {
+          if (!vm.isEditMode) {
+            // swiperAnimate(this); // todo
+          }
+        }
+      }
+    }
+    if (getQuery('filmId') && !this.isEditMode) {
+      getFilmDetail(getQuery('filmId')).then(result => {
+        console.log(result)
+        const filmData = JSON.parse(result.data.filmData)
+        vm.pages = filmData && filmData.pageList ? 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: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg")
+    center no-repeat;
+  background-size: 100%;
+  width: 1920px;
+  height: 1080px;
+  // background: #000;
+  position: relative;
+  opacity: 1;
+  .ant {
+    // 路劲裁剪
+    // clip-path: url(#cd-image-1);
+  }
+  .decoration {
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/decoration.png")
+      center no-repeat;
+    background-size: 100%;
+    height: 1080px;
+    width: 800px;
+  }
+}
+
+.svg-filters {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+#cd-image-1 circle {
+  // animation: visible-clippath 1s ease-out forwards ;
+  opacity: 1;
+}
+#mask-img-1 circle {
+  // animation: visible-clippath 1s ease-out forwards ;
+  opacity: 1;
+}
+@keyframes visible-clippath {
+  from {
+    r: 1920;
+    opacity: 1;
+  }
+  to {
+    r: 0;
+    opacity: 1;
+  }
+}
+</style>
+<style>
+.swiper-slide {
+  /* width: 100% !important; */
+}
+</style>

src/templates/listingInformation/itemList/buyingHouse.js

+export default [
+  {
+    type: 'list',
+    name: '房屋图片列表',
+    modelSchema: [ // 创建子项的Schema列表
+      {
+        img: {
+          type: 'image',
+          name: '房屋图片', // 字段名称
+          description: '请输入内容' // 用户填写时字段提示语
+        }
+      }
+    ],
+    dataKey: 'houseList'
+  },
+  {
+    type: 'text',
+    name: '标题',
+    description: '填写标题',
+    dataKey: 'title',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '金额',
+    description: '填写金额',
+    dataKey: 'price',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '亮点一名称',
+    description: '填写亮点一名称不超过三个字',
+    dataKey: 'brightOneName',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '亮点一内容',
+    description: '填写亮点一内容不超过五个字',
+    dataKey: 'brightOneContent',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '亮点二名称',
+    description: '填写亮点二名称不超过三个字',
+    dataKey: 'brightTwoName',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '亮点二内容',
+    description: '填写亮点二内容不超过五个字',
+    dataKey: 'brightTwoContent',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '亮点三名称',
+    description: '填写亮点三名称不超过三个字',
+    dataKey: 'brightThreeName',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '亮点三内容',
+    description: '填写亮点三内容不超过五个字',
+    dataKey: 'brightThreeContent',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '周边设施一',
+    description: '填写周边设施',
+    dataKey: 'peripheralFacilities1',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '周边设施二',
+    description: '填写周边设施',
+    dataKey: 'peripheralFacilities2',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '周边设施三',
+    description: '填写周边设施',
+    dataKey: 'peripheralFacilities3',
+    valueRule: ''
+  },
+  {
+    type: 'text',
+    name: '周边设施四',
+    description: '填写周边设施',
+    dataKey: 'peripheralFacilities4',
+    valueRule: ''
+  }
+]

src/templates/listingInformation/itemList/index.js

+import buyingHouse from './buyingHouse'
+import rentHouse from './rentHouse'
+export default {
+  buyingHouse,
+  rentHouse
+}

src/templates/listingInformation/itemList/readme.md

+## 编辑项列表
+### 编写格式如下
+
+```
+  {
+    type: 'list',
+    name: '房屋图片列表',
+    modelSchema: [ // 创建子项的Schema列表
+      {
+        img: {
+          type: 'image',
+          name: '房屋图片', // 字段名称
+          description: '请输入内容' // 用户填写时字段提示语
+        }
+      }
+    ],
+    dataKey: 'houseList'
+  },
+  {
+    type: 'text',
+    name: '标题',
+    description: '填写标题',
+    dataKey: 'title',
+    valueRule: ''
+  },
+```
\ No newline at end of file

src/templates/listingInformation/itemList/rentHouse.js

+export default []

src/templates/listingInformation/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/listingInformation/pages/buyingHouse.vue

+<template>
+  <!-- animated bgliner -->
+  <div class="container ant">
+    <!-- <StarSky></StarSky> -->
+    <!-- <div class="ani sanjiaoBg " swiper-animate-effect="fadeInRightBig" swiper-animate-duration="0.5s" swiper-animate-delay="0s"></div>
+    <div class="title">{{getValue('companyName')}}</div>-->
+    <!-- <div class="decoration"></div> -->
+    <div class="title" ref="title">{{getValue('title')}}</div>
+    <div class="house-list" ref="house-list">
+      <swiper :options="swiperOption" ref="mySwiper" style=" width: 830px;height: 601px;">
+        <swiper-slide
+          style="transform: translate3d(0,0,0)"
+          v-for="(item, index) in schemaData.houseList"
+          :key="index"
+        >
+          <!-- <img :src="item.img" alt /> -->
+          <div class="imgBg" :style="{'background-image' :  'url(' + item.img + ')'}"></div>
+          <div class="img" :style="{'background-image' :  'url(' + item.img + ')'}"></div>
+        </swiper-slide>
+      </swiper>
+    </div>
+    <div class="right-container">
+      <div class="center-v">
+        <div class="price" ref="price">
+          ¥
+          <span class="number">{{getValue('price')}}</span>
+          <span class="uint">/万</span>
+          <!-- <span class="number2">38765</span>
+          <span class="uint2">/平</span>-->
+        </div>
+        <div class="high-light" ref="high-light">
+          <div class="high-light-item">
+            <div class="high-light-item-top">{{getValue('brightOneContent')}}</div>
+            <div class="high-light-item-bottom">{{getValue('brightOneName')}}</div>
+          </div>
+          <div class="high-light-item">
+            <div class="high-light-item-top">{{getValue('brightTwoContent')}}</div>
+            <div class="high-light-item-bottom">{{getValue('brightTwoContent')}}</div>
+          </div>
+          <div class="high-light-item">
+            <div class="high-light-item-top">{{getValue('brightThreeContent')}}</div>
+            <div class="high-light-item-bottom">{{getValue('brightThreeName')}}</div>
+          </div>
+        </div>
+        <div class="surrounding" zh="房源特色" ref="surrounding">PROPERTY FEATURES</div>
+        <div class="feature-list" ref="feature-list">
+          <div class="feature-item" v-for="(item, index) in feutrueList" :key="index">{{item}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import StarSky from '@/framework/components/BoxShadowSky'
+import methods from '../methods'
+import anime from 'animejs/lib/anime.es.js'
+import Scene from '@/framework/utils/sence'
+export default {
+  name: 'welcome',
+  props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
+  mixins: [methods],
+  components: {
+    swiper,
+    swiperSlide,
+    StarSky
+  },
+  created () {
+    // console.log(this.list);
+  },
+  methods: {
+    reLeave () {
+      this.leave()
+    },
+    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['house-list'],
+          translateX: 0,
+          opacity: 1,
+          duration: 1000
+        }).finished,
+        anime({
+          targets: this.$refs['title'],
+          translateX: 0,
+          opacity: 1,
+          delay: 1000,
+          duration: 500,
+          easing: 'easeInOutQuad'
+        }).finished,
+        anime({
+          targets: this.$refs['price'],
+          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 () {
+      var els = [
+        '.house-list',
+        '.center-v .title',
+        '.price',
+        '.surrounding',
+        '.feature-list',
+        '.high-light .high-light-item'
+      ]
+      anime({
+        targets: '#cd-image-1 circle',
+        duration: 0,
+        r: [0, 2920]
+      })
+      anime({
+        targets: this.$refs['house-list'],
+        translateX: -1500,
+        opacity: 0,
+        duration: 0
+      })
+      anime({
+        targets: this.$refs['title'],
+        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(this.isEditMode)
+    if (!this.isEditMode) {
+      console.log(this.isEditMode)
+
+      this.enterBefore()
+    }
+  },
+  data () {
+    return {
+      currentIndex: '',
+      date: '2019.07.04',
+      currentIndex: '',
+      dataList: [
+        'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png',
+        'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg'
+      ],
+      feutrueList: ['绿化率高', '有电梯', '精装修', '满五年', '近地铁'],
+      swiperOption: {
+        effect: 'fade',
+        speed: 1000,
+        loop: true,
+        autoplay: {
+          delay: 5000
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@keyframes moveTo {
+  0% {
+    left: -50px;
+    top: 0px;
+  }
+  100% {
+    left: 300px;
+    top: 0;
+  }
+}
+@keyframes moveTo2 {
+  0% {
+    background-position: -100% 0;
+    // transform: scale(1.2)
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+.bgliner {
+  animation-name: bgliner;
+  transition: all 0.5s;
+  animation-delay: 2s;
+  animation-duration: 10s;
+}
+.container {
+  position: relative;
+  margin: 0 auto;
+  color: white;
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 1920px;
+  height: 1080px;
+  // background:
+  //   url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/buyBg.png")
+  //   center no-repeat;
+  > .title {
+    position: absolute;
+    top: 158px;
+    left: 232px;
+    font-size: 75px;
+    line-height: 1;
+    font-family: PingFangSC-Semibold;
+    font-weight: 600;
+    color: rgba(51, 51, 51, 0.8);
+    // background-image: -webkit-linear-gradient(
+    //   bottom,
+    //   rgba(41, 39, 39, 0.5),
+    //   rgba(255, 255, 255, 0.5),
+    //   rgba(255, 255, 255, 0.5)
+    // );
+    // -webkit-background-clip: text;
+    // -webkit-text-fill-color: transparent;
+  }
+  background-size: 100%;
+  .decoration {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/spotlight.png")
+      top no-repeat;
+    background-size: 100%;
+    z-index: 10;
+    height: 1080px;
+    width: 1111px;
+  }
+  .house-list {
+    position: absolute;
+    left: 235px;
+    top: 286px;
+    width: 830px;
+    height: 601px;
+    border: 4px solid rgba(255, 255, 255, 0.9);
+    // box-sizing: border-box;
+    // box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px;
+    .swiper-slide {
+      position: relative;
+    }
+
+    .imgBg {
+      filter: blur(25px);
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    .img {
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+    // img {
+    //   // border-radius: 5px;
+    //   height: 100%;
+    //   width: 100%;
+    // }
+  }
+  .right-container {
+    position: absolute;
+    width: 565px;
+    height: 609px;
+    top: 290px;
+    left: 1150px;
+    display: flex;
+    align-items: center;
+    z-index: 2;
+    .center-v {
+    }
+    .title {
+      font-size: 49px;
+      line-height: 80px;
+      color: #333;
+      font-weight: bold;
+    }
+    .price {
+      position: relative;
+      overflow: hidden;
+      font-weight: bold;
+      perspective: 800px;
+      display: inline-block;
+      height: 100px;
+      width: auto;
+      color: #e74d61;
+      font-size: 35px;
+      vertical-align: text-bottom;
+      .mirror-light {
+        position: absolute;
+        top: 10px;
+        left: 0;
+        height: 150%;
+        width: 10px;
+        animation: moveTo 10s infinite;
+        background: rgba(255, 255, 255, 0.8);
+        transform: rotate(30deg);
+        -webkit-filter: blur(2px);
+        // mix-blend-mode: overlay;
+      }
+      .number2 {
+        margin-left: 30px;
+        letter-spacing: 0;
+        color: rgba(255, 255, 255, 0.6);
+      }
+      .number {
+        font-size: 95px;
+        font-family: DINCondensed-Bold;
+        // mix-blend-mode: normal;
+        position: relative;
+        display: inline;
+        overflow: hidden;
+      }
+      .uint2 {
+        font-size: 22px;
+        color: rgba(255, 255, 255, 0.6);
+      }
+      margin-bottom: 55px;
+    }
+    .high-light {
+      width: 577px;
+      // -webkit-filter: contrast(20);
+      position: relative;
+      display: flex;
+      box-sizing: border-box;
+      padding: 22px 51px;
+      justify-content: space-between;
+      // background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/desBg.png")
+      //   center no-repeat;
+      border: 1px solid #e6e6e6;
+      border-left: none;
+      border-right: none;
+      background-size: cover;
+      .high-light-item {
+        box-sizing: border-box;
+        padding-top: 25px;
+        position: relative;
+        // opacity:0.2;
+        text-align: center;
+        min-width: 114px;
+        height: 114px;
+        z-index: 2;
+        .high-light-item-top {
+          font-size: 29px;
+          font-family: PingFangSC-Semibold;
+          font-weight: 600;
+          color: rgba(102, 102, 102, 1);
+        }
+        .high-light-item-bottom {
+          margin-top: 10px;
+          font-size: 15px;
+          font-weight: 300;
+          color: #999999;
+        }
+      }
+    }
+    .surrounding {
+      position: relative;
+      margin-top: 81px;
+      font-size: 47px;
+      font-family: DINCondensed-Bold;
+      font-weight: bold;
+      line-height: 1;
+      color: rgba(232, 84, 103, 0.2);
+      &::after {
+        position: absolute;
+        left: 0;
+        bottom: 6px;
+        content: attr(zh);
+        font-size: 26px;
+        font-family: PingFangSC-Semibold;
+        font-weight: 600;
+        color: rgba(232, 84, 103, 1);
+      }
+    }
+    .feature-list {
+      margin-top: 10px;
+      overflow: hidden;
+      border-top: 1px solid #e6e6e6;
+      padding-top: 30px;
+      .feature-item {
+        margin-bottom: 20px;
+        margin-right: 27px;
+        text-align: center;
+
+        display: flex;
+        float: left;
+        align-items: center;
+        justify-content: center;
+        font-size: 17px;
+        min-width: 97px;
+        height: 32px;
+        background: rgba(0, 0, 0, 0.26);
+        border-radius: 16px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 1);
+        .icon {
+          height: 28px;
+          margin-right: 14px;
+        }
+      }
+      .feature-item-right {
+        width: 272px;
+      }
+    }
+  }
+}
+</style>

src/templates/listingInformation/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) => {
+  pagesObj[req.keys()[index].match(re)[1]] = item.default
+  return item
+})
+export default pagesObj

src/templates/listingInformation/pages/readme.md

+## 页面入口
+> 引入index.js 会默认引入当前目录下.vue 结尾的文文件作为当前场景下的组件。schemaData.js 中componment 名字与之对应
\ No newline at end of file

src/templates/listingInformation/pages/rentHouse.vue

+<template>
+  <!-- animated bgliner -->
+  <div class="container ant">
+    <!-- <div class="ani sanjiaoBg " swiper-animate-effect="fadeInRightBig" swiper-animate-duration="0.5s" swiper-animate-delay="0s"></div>
+    <div class="title">{{getValue('companyName')}}</div>-->
+    <!-- <div class="decoration"></div> -->
+    <div class="house-list" ref="house-list">
+      <swiper :options="swiperOption" ref="mySwiper" style=" width: 1144px;height: 828px;">
+        <swiper-slide
+          style="transform: translate3d(0,0,0)"
+          v-for="(item, index) in schemaData.houseList"
+          :key="index"
+        >
+          <!-- <img :src="item.img" alt /> -->
+          <div class="imgBg" :style="{'background-image' :  'url(' + item.img + ')'}"></div>
+          <div class="img" :style="{'background-image' :  'url(' + item.img + ')'}"></div>
+        </swiper-slide>
+      </swiper>
+    </div>
+    <div class="right-container">
+      <div class="center-v">
+        <div class="title" ref="title">{{getValue('title')}}</div>
+        <div class="price" ref="price">
+          <span class="number">¥{{getValue('price')}}</span>
+          <span class="uint">/月</span>
+          <div class="mirror-light"></div>
+        </div>
+        <div class="high-light" ref="high-light">
+          <div class="high-light-item">
+            <div class="high-light-item-top">{{getValue('brightOneContent') | filterLength}}</div>
+            <div class="high-light-item-bottom">{{getValue('brightOneName')}}</div>
+          </div>
+          <div class="high-light-item">
+            <div class="high-light-item-top">{{getValue('brightTwoContent') | filterLength}}</div>
+            <div class="high-light-item-bottom">{{getValue('brightTwoContent')}}</div>
+          </div>
+          <div class="high-light-item">
+            <div class="high-light-item-top">{{getValue('brightThreeContent') | filterLength}}</div>
+            <div class="high-light-item-bottom">{{getValue('brightThreeName')}}</div>
+          </div>
+        </div>
+        <div class="surrounding" zh="周边设施" ref="surrounding">SURROUNDING FACILITIES</div>
+        <div class="feature-list" ref="feature-list">
+          <div class="feature-item">
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%9C%B0%E9%93%81.png"
+              alt
+            />
+            {{getValue('peripheralFacilities1')}}
+          </div>
+          <div class="feature-item feature-item-right">
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%85%AC%E5%9B%AD.png"
+              alt
+            />
+            {{getValue('peripheralFacilities2')}}
+          </div>
+          <div class="feature-item">
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%95%86%E5%9C%BA.png"
+              alt
+            />
+            {{getValue('peripheralFacilities3')}}
+          </div>
+          <div class="feature-item feature-item-right">
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%8C%BB%E9%99%A2.png"
+              alt
+            />
+            {{getValue('peripheralFacilities4')}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import methods from '../methods'
+import anime from 'animejs/lib/anime.es.js'
+import Scene from '@/framework/utils/sence'
+export default {
+  name: 'welcome',
+  props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
+  mixins: [methods],
+  components: {
+    swiper,
+    swiperSlide
+  },
+  created () {
+    // console.log(this.list);
+  },
+  filters: {
+    filterLength (value) {
+      return value.slice(0, 3)
+    }
+  },
+  methods: {
+    reLeave () {
+      this.leave()
+    },
+    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
+      ]
+
+      return Promise.all(PromiseAll)
+    },
+    enter () {
+      console.log('enter anime')
+      var PromiseAll = [
+        anime({
+          targets: this.$refs['house-list'],
+          translateX: 0,
+          opacity: 1,
+          duration: 1000
+        }).finished,
+        anime({
+          targets: this.$refs['title'],
+          translateX: 0,
+          opacity: 1,
+          delay: 1000,
+          duration: 500,
+          easing: 'easeInOutQuad'
+        }).finished,
+        anime({
+          targets: this.$refs['price'],
+          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 () {
+      var els = [
+        '.house-list',
+        '.center-v .title',
+        '.price',
+        '.surrounding',
+        '.feature-list',
+        '.high-light .high-light-item'
+      ]
+      anime({
+        targets: '#cd-image-1 circle',
+        duration: 0,
+        r: [0, 2920]
+      })
+      anime({
+        targets: this.$refs['house-list'],
+        translateX: -1500,
+        opacity: 0,
+        duration: 0
+      })
+      anime({
+        targets: this.$refs['title'],
+        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 () {
+    if (!this.isEditMode) {
+      this.enterBefore()
+    }
+  },
+  data () {
+    return {
+      currentIndex: '',
+      date: '2019.07.04',
+      currentIndex: '',
+      dataList: [
+        'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png',
+        'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg'
+      ],
+
+      swiperOption: {
+        effect: 'fade',
+        speed: 1000,
+        loop: true,
+        autoplay: {
+          delay: 5000
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@keyframes moveTo {
+  0% {
+    left: -50px;
+    top: 0px;
+  }
+  100% {
+    left: 300px;
+    top: 0;
+  }
+}
+@keyframes moveTo2 {
+  0% {
+    background-position: -100% 0;
+    // transform: scale(1.2)
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+@keyframes move {
+  0% {
+    transform: skew(10deg);
+  }
+  15% {
+    transform: scale(1.1);
+  }
+  30% {
+    transform: skew(10deg);
+  }
+  40% {
+    transform: skew(-10deg);
+  }
+  60% {
+    transform: skew(10deg);
+  }
+  80% {
+    transform: skew(-10deg);
+  }
+  100% {
+    transform: skew(10deg);
+  }
+}
+.bgliner {
+  animation-name: bgliner;
+  transition: all 0.5s;
+  animation-delay: 2s;
+  animation-duration: 10s;
+}
+.container {
+  position: relative;
+  margin: 0 auto;
+  color: white;
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 1920px;
+  height: 1080px;
+  // background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg")
+  //   center no-repeat;
+  // background-size: 100%;
+  .decoration {
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/decoration.png")
+      center no-repeat;
+    background-size: 100%;
+    height: 1080px;
+    width: 800px;
+  }
+  .house-list {
+    position: absolute;
+    left: 56px;
+    top: 121px;
+    width: 1144px;
+    height: 828px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px;
+    .swiper-slide {
+      position: relative;
+    }
+
+    .imgBg {
+      filter: blur(25px);
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    .img {
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+    // img {
+    //   border-radius: 5px;
+    //   height: 100%;
+    // }
+  }
+  .right-container {
+    position: absolute;
+    width: 642px;
+    height: 828px;
+    top: 121px;
+    left: 1279px;
+    display: flex;
+    align-items: center;
+    z-index: 3;
+    .center-v {
+    }
+    .title {
+      font-size: 49px;
+      line-height: 80px;
+      color: #333;
+      font-weight: bold;
+    }
+    .price {
+      position: relative;
+      overflow: hidden;
+      font-weight: bold;
+      perspective: 800px;
+      display: inline-block;
+      height: 100px;
+      width: auto;
+      color: rgba(229, 59, 81, 1);
+      font-size: 45px;
+      // background-position: 50% 0;
+      // background-blend-mode: lighten;
+      background: linear-gradient(
+          -30deg,
+          rgba(255, 255, 255, 1) 10px,
+          rgba(255, 255, 255, 1) 10px
+        )
+        no-repeat;
+      -webkit-background-clip: text;
+      // animation: moveTo2 12s infinite alternate ease-in-out;
+      .mirror-light {
+        position: absolute;
+        top: 10px;
+        left: 0;
+        height: 150%;
+        width: 10px;
+        animation: moveTo 10s infinite;
+        background: rgba(255, 255, 255, 0.8);
+        transform: rotate(30deg);
+        -webkit-filter: blur(2px);
+        // mix-blend-mode: overlay;
+      }
+      .number {
+        font-size: 100px;
+        font-family: DINCondensed-Bold;
+        // mix-blend-mode: normal;
+        position: relative;
+        display: inline;
+        overflow: hidden;
+      }
+      margin-bottom: 80px;
+    }
+    .high-light {
+      width: 577px;
+      // -webkit-filter: contrast(20);
+      position: relative;
+      display: flex;
+      border: 1px solid #e6e6e6;
+      border-left: none;
+      border-right: none;
+      box-sizing: border-box;
+      padding: 22px 51px;
+      justify-content: space-between;
+      // background: black;
+      .high-light-item {
+        box-sizing: border-box;
+        padding-top: 25px;
+        position: relative;
+        background: rgba(229, 59, 81, 1);
+        // opacity:0.2;
+        text-align: center;
+        border-radius: 50%;
+        width: 114px;
+        height: 114px;
+        z-index: 2;
+        &::after {
+          content: "";
+          background: rgba(229, 59, 81, 1);
+          opacity: 0.5;
+          // -webkit-filter: blur(20px);
+          left: -4px;
+          top: -4px;
+          position: absolute;
+          z-index: -1;
+          text-align: center;
+          border-radius: 50%;
+          width: 122px;
+          height: 122px;
+          animation: move 12s infinite alternate ease-in-out;
+        }
+        &:nth-child(2)::after {
+          animation-duration: 14.7s;
+          animation-delay: -2.7s;
+        }
+        &:nth-child(3)::after {
+          animation-duration: 8.7s;
+          animation-delay: -5.32s;
+        }
+        .high-light-item-top {
+          font-size: 29px;
+          font-family: PingFangSC-Semibold;
+          font-weight: 600;
+          color: rgba(255, 255, 255, 1);
+        }
+        .high-light-item-bottom {
+          font-size: 15px;
+          font-weight: 300;
+        }
+      }
+    }
+    .surrounding {
+      position: relative;
+      margin-top: 81px;
+      font-size: 51px;
+      font-family: DINCondensed-Bold;
+      font-weight: bold;
+      line-height: 1;
+      color: rgba(229, 59, 81, 0.2);
+      &::after {
+        position: absolute;
+        left: 0;
+        bottom: 9px;
+        content: attr(zh);
+        font-size: 28px;
+        font-family: PingFangSC-Semibold;
+        font-weight: 600;
+        color: rgba(229, 59, 81, 1);
+      }
+    }
+    .feature-list {
+      margin-top: 22px;
+      overflow: hidden;
+      border-top: 1px solid #e6e6e6;
+      padding-top: 30px;
+      .feature-item {
+        margin-bottom: 35px;
+        display: flex;
+        float: left;
+        width: 318px;
+        align-items: center;
+        font-size: 20px;
+        font-weight: 400;
+        color: rgba(102, 102, 102, 1);
+        .icon {
+          height: 28px;
+          margin-right: 14px;
+        }
+      }
+      .feature-item-right {
+        width: 272px;
+      }
+    }
+  }
+}
+</style>

src/templates/listingInformation/pages/rentHouse2.vue

+<template>
+  <!-- animated bgliner -->
+  <div class="container ant">
+    <!-- <div class="ani sanjiaoBg " swiper-animate-effect="fadeInRightBig" swiper-animate-duration="0.5s" swiper-animate-delay="0s"></div>
+    <div class="title">{{getValue('companyName')}}</div>-->
+    <!-- <div class="decoration"></div> -->
+    <div class="house-list" ref="house-list">
+      <swiper :options="swiperOption" ref="mySwiper" style=" width:672px;
+height:912px;">
+        <swiper-slide
+          style="transform: translate3d(0,0,0)"
+          v-for="(item, index) in schemaData.houseList"
+          :key="index"
+        >
+          <!-- <img :src="item.img" alt /> -->
+          <div class="imgBg" :style="{'background-image' :  'url(' + item.img + ')'}"></div>
+          <div class="img" :style="{'background-image' :  'url(' + item.img + ')'}"></div>
+        </swiper-slide>
+      </swiper>
+    </div>
+    <div class="right-container">
+      <div class="center-v">
+        <div class="title" ref="title">{{getValue('title')}}</div>
+        <div class="price" ref="price">
+          ¥
+          <span class="number">{{getValue('price')}}</span>
+          <span class="uint">/月</span>
+          <div class="mirror-light"></div>
+        </div>
+
+        <div class="surrounding" ref="surrounding" zh="周边设施">SURROUNDING FACILITIES</div>
+        <div class="feature-list" ref="feature-list">
+          <div class="feature-item">
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%9C%B0%E9%93%81.png"
+              alt
+            />
+            {{getValue('peripheralFacilities1')}}
+          </div>
+          <div class="feature-item feature-item-right">
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%85%AC%E5%9B%AD.png"
+              alt
+            />
+            {{getValue('peripheralFacilities2')}}
+          </div>
+          <div class="feature-item">
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%95%86%E5%9C%BA.png"
+              alt
+            />
+            {{getValue('peripheralFacilities3')}}
+          </div>
+          <div class="feature-item feature-item-right">
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%8C%BB%E9%99%A2.png"
+              alt
+            />
+            {{getValue('peripheralFacilities4')}}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="high-light" ref="high-light">
+      <div class="high-light-item">
+        <div class="high-light-item-top">{{getValue('brightOneContent')}}</div>
+        <div class="high-light-item-bottom">{{getValue('brightOneName')}}</div>
+      </div>
+      <div class="high-light-item">
+        <div class="high-light-item-top">{{getValue('brightTwoContent')}}</div>
+        <div class="high-light-item-bottom">{{getValue('brightTwoContent')}}</div>
+      </div>
+      <div class="high-light-item">
+        <div class="high-light-item-top">{{getValue('brightThreeContent')}}</div>
+        <div class="high-light-item-bottom">{{getValue('brightThreeName')}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import methods from '../methods'
+import anime from 'animejs/lib/anime.es.js'
+import Scene from '@/framework/utils/sence'
+export default {
+  name: 'welcome',
+  props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
+  mixins: [methods],
+  components: {
+    swiper,
+    swiperSlide
+  },
+  created () {
+    // console.log(this.list);
+  },
+  methods: {
+    reLeave () {
+      this.leave()
+    },
+    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
+      ]
+      return Promise.all(PromiseAll)
+    },
+    enter () {
+      console.log('enter anime')
+      var PromiseAll = [
+        anime({
+          targets: this.$refs['house-list'],
+          translateX: 0,
+          opacity: 1,
+          duration: 1000
+        }).finished,
+        anime({
+          targets: this.$refs['title'],
+          translateX: 0,
+          opacity: 1,
+          delay: 1000,
+          duration: 500,
+          easing: 'easeInOutQuad'
+        }).finished,
+        anime({
+          targets: this.$refs['price'],
+          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 () {
+      var els = [
+        '.house-list',
+        '.center-v .title',
+        '.price',
+        '.surrounding',
+        '.feature-list',
+        '.high-light .high-light-item'
+      ]
+      anime({
+        targets: '#cd-image-1 circle',
+        duration: 0,
+        r: [0, 2920]
+      })
+      anime({
+        targets: this.$refs['house-list'],
+        translateX: -1500,
+        opacity: 0,
+        duration: 0
+      })
+      anime({
+        targets: this.$refs['title'],
+        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 () {
+    if (!this.isEditMode) {
+      this.enterBefore()
+    }
+  },
+  data () {
+    return {
+      currentIndex: '',
+      date: '2019.07.04',
+      currentIndex: '',
+      dataList: [
+        'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png',
+        'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg'
+      ],
+
+      swiperOption: {
+        effect: 'fade',
+        speed: 1000,
+        loop: true,
+        autoplay: {
+          delay: 5000
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@keyframes moveTo {
+  0% {
+    left: -50px;
+    top: 0px;
+  }
+  100% {
+    left: 300px;
+    top: 0;
+  }
+}
+@keyframes moveTo2 {
+  0% {
+    background-position: -100% 0;
+    // transform: scale(1.2)
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+@keyframes move {
+  0% {
+    transform: skew(10deg);
+  }
+  15% {
+    transform: scale(1.1);
+  }
+  30% {
+    transform: skew(10deg);
+  }
+  40% {
+    transform: skew(-10deg);
+  }
+  60% {
+    transform: skew(10deg);
+  }
+  80% {
+    transform: skew(-10deg);
+  }
+  100% {
+    transform: skew(10deg);
+  }
+}
+.bgliner {
+  animation-name: bgliner;
+  transition: all 0.5s;
+  animation-delay: 2s;
+  animation-duration: 10s;
+}
+.container {
+  position: relative;
+  margin: 0 auto;
+  color: white;
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 1920px;
+  height: 1080px;
+  // background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg")
+  //   center no-repeat;
+  // background-size: 100%;
+  .decoration {
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/decoration.png")
+      center no-repeat;
+    background-size: 100%;
+    height: 1080px;
+    width: 800px;
+  }
+  .house-list {
+    position: absolute;
+    left: 135px;
+    top: 79px;
+    width: 672px;
+    height: 912px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px;
+    line-height: 912px;
+    .swiper-slide {
+      position: relative;
+    }
+
+    .imgBg {
+      filter: blur(25px);
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    .img {
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+    // img {
+    //   vertical-align: middle;
+    //   // margin-top: 50%;
+    //   border-radius: 5px;
+    //   max-height: 100%;
+    //   max-width: 100%;
+    //   margin: auto;
+    // }
+  }
+  .right-container {
+    position: absolute;
+    width: 536px;
+    height: 912px;
+    top: 80px;
+    left: 902px;
+    display: flex;
+    align-items: center;
+    z-index: 3;
+    .center-v {
+    }
+    .title {
+      font-size: 67px;
+      line-height: 87px;
+      color: #333;
+      font-weight: bold;
+      width: 150%;
+    }
+    .price {
+      position: relative;
+      overflow: hidden;
+      font-weight: bold;
+      perspective: 800px;
+      vertical-align: text-bottom;
+      .number {
+        font-size: 136px;
+        font-family: DINCondensed-Bold;
+      }
+      display: inline-block;
+      height: 100px;
+      width: auto;
+      color: rgba(229, 59, 81, 1);
+      font-size: 45px;
+      // background-position: 50% 0;
+      // background-blend-mode: lighten;
+      background: linear-gradient(
+          -30deg,
+          rgba(255, 255, 255, 1) 10px,
+          rgba(255, 255, 255, 1) 10px
+        )
+        no-repeat;
+      -webkit-background-clip: text;
+      // animation: moveTo2 12s infinite alternate ease-in-out;
+      .mirror-light {
+        position: absolute;
+        top: 10px;
+        left: 0;
+        height: 150%;
+        width: 10px;
+        animation: moveTo 10s infinite;
+        background: rgba(255, 255, 255, 0.8);
+        transform: rotate(30deg);
+        -webkit-filter: blur(2px);
+        // mix-blend-mode: overlay;
+      }
+      .number {
+        font-size: 100px;
+        font-family: DINCondensed-Bold;
+        // mix-blend-mode: normal;
+        position: relative;
+        display: inline;
+        overflow: hidden;
+      }
+      margin-bottom: 80px;
+      margin-top: 50px;
+    }
+    .surrounding {
+      position: relative;
+      font-size: 60px;
+      font-family: DINCondensed-Bold;
+      font-weight: bold;
+      line-height: 1;
+      color: rgba(229, 59, 81, 0.2);
+      &::after {
+        position: absolute;
+        left: 0;
+        bottom: 9px;
+        content: attr(zh);
+        font-size: 33px;
+        font-family: PingFangSC-Semibold;
+        font-weight: 600;
+        color: rgba(229, 59, 81, 1);
+      }
+    }
+    .feature-list {
+      margin-top: 23px;
+      overflow: hidden;
+      border-top: 1px solid #e6e6e6;
+      padding-top: 35px;
+      .feature-item {
+        margin-bottom: 47px;
+        display: flex;
+        // float: left;
+        // width: 318px;
+        align-items: center;
+        font-size: 24px;
+        font-weight: 400;
+        color: rgba(102, 102, 102, 1);
+        .icon {
+          height: 33px;
+          width: 30px;
+          margin-right: 20px;
+        }
+      }
+      .feature-item-right {
+        // width: 272px;
+      }
+    }
+  }
+  .high-light {
+    // display: none;
+    position: absolute;
+    // width: 577px;
+    // -webkit-filter: contrast(20);
+    // display: flex;
+    right: 95px;
+    top: 346px;
+    box-sizing: border-box;
+    justify-content: space-between;
+    // background: black;
+    .high-light-item {
+      box-sizing: border-box;
+      padding-top: 25px;
+      position: relative;
+      // background: rgba(229, 59, 81, 1);
+      // opacity:0.2;
+      text-align: center;
+      border-radius: 50%;
+      margin-bottom: 112px;
+      width: 195px;
+      height: 121px;
+      border: 1px solid rgba(0, 0, 0, 0.3);
+      // opacity:0.3;
+      border-radius: 60px;
+      z-index: 2;
+      .high-light-item-top {
+        font-size: 36px;
+        font-family: PingFangSC-Semibold;
+        font-weight: 600;
+        color: #666666;
+      }
+      .high-light-item-bottom {
+        font-size: 18px;
+        font-weight: 300;
+        color: #999999;
+      }
+    }
+  }
+}
+</style>

src/templates/listingInformation/pages/rentHouse3.vue

+<template>
+  <!-- animated bgliner -->
+  <div class="container" :class="'ant'" @click="reLeave">
+    <!-- <div class="ani sanjiaoBg " swiper-animate-effect="fadeInRightBig" swiper-animate-duration="0.5s" swiper-animate-delay="0s"></div>
+    <div class="title">{{getValue('companyName')}}</div>-->
+    <!-- <div class="decoration"></div> -->
+    <div class="house-list" ref="house-list">
+      <swiper :options="swiperOption" ref="mySwiper" style=" width:731px;height:1080px;">
+        <swiper-slide
+          style="transform: translate3d(0,0,0)"
+          v-for="(item, index) in schemaData.houseList"
+          :key="index"
+        >
+          <div class="imgBg" :style="{'background-image' :  'url(' + item.img + ')'}"></div>
+          <div class="img" :style="{'background-image' :  'url(' + item.img + ')'}"></div>
+        </swiper-slide>
+      </swiper>
+    </div>
+    <div class="right-container">
+      <div class="center-v">
+        <div class="title" ref="title">{{getValue('title')}}</div>
+        <div class="price" ref="price">
+          ¥
+          <span class="number">{{getValue('price')}}</span>
+          <span class="uint">/月</span>
+          <div class="mirror-light"></div>
+        </div>
+
+        <div class="surrounding" ref="surrounding" zh="周边设施">SURROUNDING FACILITIES</div>
+        <div class="feature-list" ref="feature-list">
+          <div class="feature-item">
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%9C%B0%E9%93%81.png"
+              alt
+            />
+            {{getValue('peripheralFacilities1')}}
+          </div>
+          <div class="feature-item feature-item-right">
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%85%AC%E5%9B%AD.png"
+              alt
+            />
+            {{getValue('peripheralFacilities2')}}
+          </div>
+          <div class="feature-item">
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%95%86%E5%9C%BA.png"
+              alt
+            />
+            {{getValue('peripheralFacilities3')}}
+          </div>
+          <div class="feature-item feature-item-right">
+            <img
+              class="icon"
+              src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%8C%BB%E9%99%A2.png"
+              alt
+            />
+            {{getValue('peripheralFacilities4')}}
+          </div>
+        </div>
+        <div class="high-light">
+          <div class="high-light" ref="high-light">
+            <div class="high-light-item">
+              <div class="high-light-item-top">{{getValue('brightOneContent')}}</div>
+              <div class="high-light-item-bottom">{{getValue('brightOneName')}}</div>
+            </div>
+            <div class="high-light-item">
+              <div class="high-light-item-top">{{getValue('brightTwoContent')}}</div>
+              <div class="high-light-item-bottom">{{getValue('brightTwoContent')}}</div>
+            </div>
+            <div class="high-light-item">
+              <div class="high-light-item-top">{{getValue('brightThreeContent')}}</div>
+              <div class="high-light-item-bottom">{{getValue('brightThreeName')}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import methods from '../methods'
+import Scene from '@/framework/utils/sence'
+import anime from 'animejs/lib/anime.es.js'
+export default {
+  name: 'welcome',
+  props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
+  mixins: [methods],
+  components: {
+    swiper,
+    swiperSlide
+  },
+  created () {
+    // console.log(this.list);
+    window.test = this
+  },
+  methods: {
+    reLeave () {
+      this.leave()
+    },
+    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
+      ]
+      return Promise.all(PromiseAll)
+    },
+    enter () {
+      var PromiseAll = [
+        anime({
+          targets: this.$refs['house-list'],
+          translateX: 0,
+          opacity: 1,
+          duration: 1000
+        }).finished,
+        anime({
+          targets: this.$refs['title'],
+          translateX: 0,
+          opacity: 1,
+          delay: 1000,
+          duration: 500,
+          easing: 'easeInOutQuad'
+        }).finished,
+        anime({
+          targets: this.$refs['price'],
+          translateX: 0,
+          opacity: 1,
+          duration: 1000,
+          delay: 1200,
+          easing: 'easeInOutQuad'
+        }).finished,
+        anime({
+          targets: this.$refs['surrounding'],
+          translateX: 0,
+          opacity: 1,
+          duration: 1000,
+          delay: 1500,
+          easing: 'easeInOutQuad'
+        }).finished,
+        anime({
+          targets: this.$refs['feature-list'],
+          translateX: 0,
+          opacity: 1,
+          duration: 1000,
+          delay: 1800,
+          easing: 'easeInOutQuad'
+        }).finished,
+        anime({
+          targets: '.high-light',
+          translateY: 0,
+          opacity: 1,
+          duration: 1000,
+
+          // delay: anime.stagger(1000),
+          delay: 2000,
+          easing: 'easeInOutQuad'
+        }).finished
+      ]
+      Promise.all(PromiseAll).then(() => {
+        this.enterAfter()
+      })
+      return Promise.all(PromiseAll)
+    },
+    enterBefore () {
+      var els = [
+        '.house-list',
+        '.center-v .title',
+        '.price',
+        '.surrounding',
+        '.feature-list',
+        '.high-light .high-light-item'
+      ]
+      anime({
+        targets: '#cd-image-1 circle',
+        duration: 0,
+        r: [0, 2920]
+      })
+      anime({
+        targets: this.$refs['house-list'],
+        translateX: -1000,
+        opacity: 0,
+        duration: 0
+      })
+      anime({
+        targets: this.$refs['title'],
+        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',
+        translateY: 1000,
+        opacity: 0,
+        duration: 0
+      })
+      // setTimeout(() => {
+      //   this.enter();
+      // }, 1000);
+      // anime.set(els[1], {
+      //   translateX: () => 1000,
+      //   opacity: () => 0
+      // })
+      // anime.set(els[2], {
+      //   translateX: () => 1000,
+      //   opacity: () => 0
+      // })
+      // anime.set(els[3], {
+      //   translateX: () => 1000,
+      //   opacity: () => 0
+      // })
+      // anime.set(els[4], {
+      //   translateX: () => 1000,
+      //   opacity: () => 0
+      // })
+      // anime.set(els[0], {
+      //   translateX: -1000
+      // })
+      // anime.set(els[0], {
+      //   translateX: -1000
+      // })
+    },
+    enterAfter () {
+      this.timer = setTimeout(() => {
+        Scene.leaveBefore()
+        clearTimeout(this.timer)
+      }, 10000)
+    }
+  },
+  mounted () {
+    if (!this.isEditMode) {
+      this.enterBefore()
+    }
+  },
+  data () {
+    return {
+      currentIndex: '',
+      date: '2019.07.04',
+      currentIndex: '',
+      dataList: [
+        'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png'
+      ],
+
+      swiperOption: {
+        effect: 'fade',
+        speed: 1000,
+        loop: true,
+        autoplay: {
+          delay: 5000
+        }
+      },
+      isLeave: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@keyframes moveTo {
+  0% {
+    left: -50px;
+    top: 0px;
+  }
+  100% {
+    left: 300px;
+    top: 0;
+  }
+}
+@keyframes moveTo2 {
+  0% {
+    background-position: -100% 0;
+    // transform: scale(1.2)
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+@keyframes move {
+  0% {
+    transform: skew(10deg);
+  }
+  15% {
+    transform: scale(1.1);
+  }
+  30% {
+    transform: skew(10deg);
+  }
+  40% {
+    transform: skew(-10deg);
+  }
+  60% {
+    transform: skew(10deg);
+  }
+  80% {
+    transform: skew(-10deg);
+  }
+  100% {
+    transform: skew(10deg);
+  }
+}
+.bgliner {
+  animation-name: bgliner;
+  transition: all 0.5s;
+  animation-delay: 2s;
+  animation-duration: 10s;
+}
+.container {
+  position: relative;
+  margin: 0 auto;
+  color: white;
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 1920px;
+  height: 1080px;
+  // background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg")
+  //   center no-repeat;
+  // background-size: 100%;
+  .decoration {
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/decoration.png")
+      center no-repeat;
+    background-size: 100%;
+    height: 1080px;
+    width: 800px;
+  }
+  .house-list {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 731px;
+    height: 1080px;
+    border-radius: 0px 0px 100px 0px;
+    line-height: 1080px;
+    overflow: hidden;
+    .swiper-slide {
+      position: relative;
+    }
+
+    .imgBg {
+      filter: blur(25px);
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    .img {
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+    img {
+      // vertical-align: middle;
+      // // margin-top: 50%;
+      // // border-radius: 5px;
+      // height: 100%;
+      // width: 100%;
+      // margin: auto;
+    }
+  }
+  .right-container {
+    position: absolute;
+    width: 1018px;
+    height: 912px;
+    top: 80px;
+    left: 792px;
+    display: flex;
+    align-items: center;
+    z-index: 3;
+    .center-v {
+    }
+    .title {
+      font-size: 66px;
+      line-height: 87px;
+      color: rgba(51, 51, 51, 0.8);
+      font-weight: bold;
+      letter-spacing: 0px;
+    }
+    .price {
+      position: relative;
+      overflow: hidden;
+      font-weight: bold;
+      perspective: 800px;
+      vertical-align: text-bottom;
+      .number {
+        font-size: 145px;
+        font-family: DINCondensed-Bold;
+      }
+      display: inline-block;
+      height: 100px;
+      width: auto;
+      color: rgba(229, 59, 81, 1);
+      font-size: 46px;
+      // background-position: 50% 0;
+      // background-blend-mode: lighten;
+      background: linear-gradient(
+          -30deg,
+          rgba(255, 255, 255, 1) 10px,
+          rgba(255, 255, 255, 1) 10px
+        )
+        no-repeat;
+      -webkit-background-clip: text;
+      // animation: moveTo2 12s infinite alternate ease-in-out;
+      .mirror-light {
+        position: absolute;
+        top: 10px;
+        left: 0;
+        height: 150%;
+        width: 10px;
+        animation: moveTo 10s infinite;
+        background: rgba(255, 255, 255, 0.8);
+        transform: rotate(30deg);
+        -webkit-filter: blur(2px);
+        // mix-blend-mode: overlay;
+      }
+      .number {
+        font-size: 100px;
+        font-family: DINCondensed-Bold;
+        // mix-blend-mode: normal;
+        position: relative;
+        display: inline;
+        overflow: hidden;
+      }
+      margin-bottom: 80px;
+      margin-top: 50px;
+    }
+    .surrounding {
+      position: relative;
+      font-size: 60px;
+      font-family: DINCondensed-Bold;
+      font-weight: bold;
+      line-height: 1;
+      color: rgba(229, 59, 81, 0.2);
+      &::after {
+        position: absolute;
+        left: 0;
+        bottom: 9px;
+        content: attr(zh);
+        font-size: 33px;
+        font-family: PingFangSC-Semibold;
+        font-weight: 600;
+        color: rgba(229, 59, 81, 1);
+      }
+    }
+    .feature-list {
+      margin-top: 23px;
+      overflow: hidden;
+      border-top: 1px solid #e6e6e6;
+      padding-top: 35px;
+      .feature-item {
+        margin-bottom: 47px;
+        display: flex;
+        float: left;
+        min-width: 318px;
+        margin-right: 70px;
+        align-items: center;
+        font-size: 24px;
+        font-weight: 400;
+        color: rgba(102, 102, 102, 1);
+        .icon {
+          height: 33px;
+          width: 30px;
+          margin-right: 20px;
+        }
+      }
+      .feature-item-right {
+        // width: 272px;
+      }
+    }
+    .high-light {
+      // display: none;
+      // position: absolute;
+      // width: 577px;
+      // -webkit-filter: contrast(20);
+      display: flex;
+      right: 95px;
+      top: 346px;
+      // border: 1px solid #e6e6e6;
+      border-left: none;
+      border-right: none;
+      box-sizing: border-box;
+      justify-content: space-between;
+      margin-top: 60px;
+      // background: black;
+      .high-light-item {
+        box-sizing: border-box;
+        padding-top: 25px;
+        position: relative;
+        // background: rgba(229, 59, 81, 1);
+        // opacity:0.2;
+        text-align: center;
+        border-radius: 50%;
+        margin-right: 103px;
+        width: 195px;
+        height: 121px;
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        // opacity:0.3;
+        border-radius: 60px;
+        z-index: 2;
+        .high-light-item-top {
+          font-size: 36px;
+          font-family: PingFangSC-Semibold;
+          font-weight: 600;
+          color: #666666;
+        }
+        .high-light-item-bottom {
+          font-size: 18px;
+          font-weight: 300;
+          color: #999999;
+        }
+      }
+    }
+  }
+}
+</style>

src/templates/listingInformation/schema/noticeSchema.js

+export default {}

src/templates/listingInformation/schema/scheduleSchema.js

+export default {}

src/templates/listingInformation/schema/welcomSchema.js

+export default {}

src/templates/listingInformation/templateInfo.js

+export default {
+  name: '房源信息模板'
+}