huaqiaocheng-h5/src/views/office.vue

<!-- home -->
<template>
  <div class="office-index">
    <pure-image :bg-image="require('@/assets/office/1.png')"></pure-image>
    <office-image class="office-navi" @goto="handleGoto" />
    <div v-for="(item, index) in list" :key="item.image">
      <yz-modal :visible="visible[index]" class="office-modal">
        <pure-image :bg-image="item.image"></pure-image>
        <div class="back-sign" @click="cancelShow(index)">
          <img :src="item.backSign" alt />
        </div>
      </yz-modal>
    </div>
    <div class="back-sign index-back" @click="handleGotoIndex(index)">
      <img :src="backSignImg" alt />
    </div>
  </div>
</template>

<script>
const backSignImg = require('@/assets/office/1-2.png')
const backSignImg2 = require('@/assets/images/apartment/backSign-2.png')
export default {
  components: {
    PureImage: () => import('./components/PureImage.vue'),
    // SwiperImage: () => import('./components/SwiperImage.vue'),
    // ApartmentNavi: () => import('./components/ApartmentNavi.vue'),
    OfficeImage: () => import('./components/OfficeImage.vue')
  },
  data() {
    return {
      backSignImg,
      backSignImg2,
      visible: Array(6).fill(false),
      list: [
        {
          image: require('@/assets/office/2-1.png'),
          color: '#f0f0f0',
          backSign: backSignImg
        },
        {
          image: require('@/assets/office/3-1.png'),
          color: '#f0f0f0',
          backSign: backSignImg2
        },
        {
          image: require('@/assets/office/4-1.png'),
          color: '#f0f0f0',
          backSign: backSignImg
        },
        {
          image: require('@/assets/office/6-1.png'),
          color: '#f0f0f0',
          backSign: backSignImg
        },
        {
          image: require('@/assets/office/5-1.png'),
          color: '#f0f0f0',
          backSign: backSignImg
        }
      ],
      houseList: [
        {
          image: require('@/assets/images/apartment/7-1.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/7-2.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/7-3.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/7-4.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/7-5.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/7-6.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/7-7.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/7-8.jpg'),
          color: '#f0f0f0'
        }
      ]
    }
  },

  methods: {
    handleGoto(inx) {
      // inx 是从1开始的
      this.$set(this.visible, inx - 1, true)
    },
    cancelShow(inx) {
      this.$set(this.visible, inx, false)
    },
    handleGotoIndex(inx) {
      this.$router.push({ path: '/' })
    }
  }
}
</script>

<style lang="scss" scoped>
.office-index {
  height: 100%;
  position: relative;
  overflow: hidden;

  .office-modal {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
  }

  .office-navi {
    position: absolute;
    width: 100%;
    height: 40%;
    bottom: 0;
    left: 0;
  }

  .back-sign {
    position: absolute;
    z-index: 500;
    right: 10px;
    bottom: -24px;
    width: 96px;
    height: 78px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>