按钮图片

src/views/components/OfficeImage.vue

@@ -1,53 +1,32 @@
 <template>
-  <div>
+  <div style="overflow: hidden;">
     <div class="flex-box-a">
       <div class="flex-box-item">
-        <img :src="require('@/assets/office/1-1-0.png')" style="height: 48px; " alt />
+        <img
+          :src="require('@/assets/office/1-1-0.png')"
+          style="height: 48px;animation: downfade 2s infinite; "
+          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)"
-        />
+        <img :src="require('@/assets/office/2.png')" alt @click="handleClick(1)" />
       </div>
       <div class="flex-box-item">
-        <img
-          :src="require('@/assets/office/3.png')"
-          style="height: 78px"
-          alt
-          @click="handleClick(2)"
-        />
+        <img :src="require('@/assets/office/3.png')" alt @click="handleClick(2)" />
       </div>
       <div class="flex-box-item">
-        <img
-          :src="require('@/assets/office/4.png')"
-          style="height: 78px"
-          alt
-          @click="handleClick(3)"
-        />
+        <img :src="require('@/assets/office/4.png')" 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)"
-          />
+          <img :src="require('@/assets/office/5.png')" alt @click="handleClick(4)" />
         </div>
         <div class="flex-box-item">
-          <img
-            :src="require('@/assets/office/6.png')"
-            style="height: 78px"
-            alt
-            @click="handleClick(5)"
-          />
+          <img :src="require('@/assets/office/6.png')" alt @click="handleClick(5)" />
         </div>
         <div ref="divWidth" class="flex-box-item"></div>
       </div>

src/views/office.vue

@@ -7,7 +7,7 @@
       <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/office/1-2.png')" alt />
+          <img :src="item.backSign" alt />
         </div>
       </yz-modal>
     </div>
@@ -21,6 +21,8 @@
 </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'),
@@ -30,27 +32,34 @@ export default {
   },
   data() {
     return {
+      backSignImg,
+      backSignImg2,
       visible: Array(6).fill(false),
       list: [
         {
           image: require('@/assets/office/2-1.png'),
-          color: '#f0f0f0'
+          color: '#f0f0f0',
+          backSign: backSignImg
         },
         {
           image: require('@/assets/office/3-1.png'),
-          color: '#f0f0f0'
+          color: '#f0f0f0',
+          backSign: backSignImg2
         },
         {
           image: require('@/assets/office/4-1.png'),
-          color: '#f0f0f0'
+          color: '#f0f0f0',
+          backSign: backSignImg
         },
         {
           image: require('@/assets/office/6-1.png'),
-          color: '#f0f0f0'
+          color: '#f0f0f0',
+          backSign: backSignImg
         },
         {
           image: require('@/assets/office/5-1.png'),
-          color: '#f0f0f0'
+          color: '#f0f0f0',
+          backSign: backSignImg
         }
       ],
       houseList: [
@@ -127,7 +136,7 @@ export default {
     position: absolute;
     z-index: 500;
     right: 10px;
-    bottom: 20px;
+    bottom: -24px;
     width: 96px;
     height: 78px;