styl

src/views/components/OfficeImage.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div class="flex-box-a">
+      <div class="flex-box-item">
+        <img :src="require('@/assets/office/1-1-0.png')" style="height: 48px; " alt />
+      </div>
+    </div>
+    <div class="flex-box" style="margin-top: 10px">
+      <div class="flex-box-item">
+        <img
+          :src="require('@/assets/office/2.png')"
+          style="height: 78px"
+          alt
+          @click="handleClick(1)"
+        />
+      </div>
+      <div class="flex-box-item">
+        <img
+          :src="require('@/assets/office/3.png')"
+          style="height: 78px"
+          alt
+          @click="handleClick(2)"
+        />
+      </div>
+      <div class="flex-box-item">
+        <img
+          :src="require('@/assets/office/4.png')"
+          style="height: 78px"
+          alt
+          @click="handleClick(3)"
+        />
+      </div>
+    </div>
+    <div class="flex-box" style="margin-top: 20px">
+      <div class="flex-box-style" :style="`transform: translate(${divWidth}px)`">
+        <div class="flex-box-item">
+          <img
+            :src="require('@/assets/office/5.png')"
+            style="height: 78px"
+            alt
+            @click="handleClick(4)"
+          />
+        </div>
+        <div class="flex-box-item">
+          <img
+            :src="require('@/assets/office/6.png')"
+            style="height: 78px"
+            alt
+            @click="handleClick(5)"
+          />
+        </div>
+        <div ref="divWidth" class="flex-box-item"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OfficeImage',
+  data() {
+    return {
+      divWidth: ''
+    }
+  },
+  created() {},
+  mounted() {
+    this.$nextTick(function () {
+      // 仅在整个视图都被渲染之后才会运行的代码
+      this.divWidth = this.$refs.divWidth.clientWidth / 2
+    })
+  },
+  methods: {
+    handleClick(inx) {
+      this.$emit('goto', inx)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flex-box-a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding-top: 25px;
+}
+.flex-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 20px;
+  .flex-box-style {
+    justify-content: start;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    flex: 3;
+  }
+
+  &-item {
+    flex: 1;
+    img {
+      display: block;
+      height: 56px;
+      margin: 0 auto;
+    }
+  }
+}
+</style>

src/views/office.vue

@@ -1,22 +1,22 @@
 <!-- home -->
 <template>
-  <div class="apartment">
-    <pure-image :bg-image="require('@/assets/images/apartment/1.jpg')"></pure-image>
-    <apartment-navi class="apartment-navi" @goto="handleGoto" />
+  <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">
-      <modal v-if="visible[index]" class="apartment-modal">
+      <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="require('@/assets/images/apartment/backSign.png')" alt />
+          <img :src="require('@/assets/office/1-2.png')" alt />
         </div>
-      </modal>
+      </yz-modal>
     </div>
-    <modal v-if="visible[5]" class="apartment-modal">
+    <!-- <modal v-if="visible[5]" class="office-modal">
       <swiper-image :list="houseList"></swiper-image>
       <div class="back-sign" @click="cancelShow(5)">
-        <img :src="require('@/assets/images/apartment/backSign.png')" alt />
+        <img :src="require('@/assets/office/1-2.png')" alt />
       </div>
-    </modal>
+    </modal>-->
   </div>
 </template>
 
@@ -24,31 +24,32 @@
 export default {
   components: {
     PureImage: () => import('./components/PureImage.vue'),
-    SwiperImage: () => import('./components/SwiperImage.vue'),
-    ApartmentNavi: () => import('./components/ApartmentNavi.vue')
+    // SwiperImage: () => import('./components/SwiperImage.vue'),
+    // ApartmentNavi: () => import('./components/ApartmentNavi.vue'),
+    OfficeImage: () => import('./components/OfficeImage.vue')
   },
   data() {
     return {
       visible: Array(6).fill(false),
       list: [
         {
-          image: require('@/assets/images/apartment/2-2.jpg'),
+          image: require('@/assets/office/2-1.png'),
           color: '#f0f0f0'
         },
         {
-          image: require('@/assets/images/apartment/3-1.jpg'),
+          image: require('@/assets/office/3-1.png'),
           color: '#f0f0f0'
         },
         {
-          image: require('@/assets/images/apartment/4-1.jpg'),
+          image: require('@/assets/office/4-1.png'),
           color: '#f0f0f0'
         },
         {
-          image: require('@/assets/images/apartment/6-1.jpg'),
+          image: require('@/assets/office/6-1.png'),
           color: '#f0f0f0'
         },
         {
-          image: require('@/assets/images/apartment/5-1.jpg'),
+          image: require('@/assets/office/5-1.png'),
           color: '#f0f0f0'
         }
       ],
@@ -102,11 +103,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.apartment {
+.office-index {
   height: 100%;
   position: relative;
 
-  .apartment-modal {
+  .office-modal {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -114,7 +115,7 @@ export default {
     left: 0;
   }
 
-  .apartment-navi {
+  .office-navi {
     position: absolute;
     width: 100%;
     height: 40%;