模板页面3

src/templates/listingInformation/pages/rentHouse3.vue

+<template>
+  <!-- animated bgliner -->
+  <div class="container infinite">
+    <!-- <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">
+      <swiper :options="swiperOption"
+              ref="mySwiper"
+              style=" width:731px;height:1080px;">
+        <swiper-slide style="transform: translate3d(0,0,0)"
+                      v-for="(item, index) in dataList"
+                      :key="index">
+          <img :src="item"
+               alt />
+        </swiper-slide>
+      </swiper>
+    </div>
+    <div class="right-container">
+      <div class="center-v">
+        <div class="title">合租 | 彩虹新城·两居室·精装修·南</div>
+        <div class="price">
+          ¥
+          <span class="number">2100</span>
+          <span class="uint">/月</span>
+          <div class="mirror-light"></div>
+        </div>
+
+        <div class="surrounding"
+             zh="周边设施">SURROUNDING FACILITIES</div>
+        <div class="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 />
+            地铁四号线枣园站 260米
+          </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 />
+            地铁四号线枣园站 260米
+          </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 />
+            地铁四号线枣园站 260米
+          </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 />
+            地铁四号线枣园站 260米
+          </div>
+        </div>
+        <div class="high-light">
+          <div class="high-light-item">
+            <div class="high-light-item-top">20m²</div>
+            <div class="high-light-item-bottom">面积</div>
+          </div>
+          <div class="high-light-item">
+            <div class="high-light-item-top">阳台</div>
+            <div class="high-light-item-bottom">面积</div>
+          </div>
+          <div class="high-light-item">
+            <div class="high-light-item-top">3/10</div>
+            <div class="high-light-item-bottom">楼层</div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { swiper, swiperSlide } from "vue-awesome-swiper";
+import methods from "../methods";
+export default {
+  name: "welcome",
+  props: ["schemaData", "page", "isEditMode", "cancelEdit"],
+  mixins: [methods],
+  components: {
+    swiper,
+    swiperSlide
+  },
+  created() {
+    // console.log(this.list);
+  },
+  mounted() {},
+  data() {
+    return {
+      currentIndex: "",
+      date: "2019.07.04",
+      currentIndex: "",
+      dataList: [
+        "http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png"
+      ],
+
+      swiperOption: {
+        effect: "slider",
+        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: 0;
+    top: 0;
+    width: 731px;
+    height: 1080px;
+    border-radius: 0px 0px 100px 0px;
+    line-height: 1080px;
+    overflow: hidden;
+    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/schemaData.js

@@ -9,7 +9,7 @@ export default {
     {
     {
       name: '租房页面',
       name: '租房页面',
       thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/thumb2.png',
       thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/thumb2.png',
-      component: 'rentHouse2',
+      component: 'rentHouse3',
       defaultData: defaultData.buyingHouse,
       defaultData: defaultData.buyingHouse,
       schemaData: defaultData.buyingHouse,
       schemaData: defaultData.buyingHouse,
       itemList: itemList.rentHouse
       itemList: itemList.rentHouse