fix

src/App.vue

   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  /* margin-top: 60px; */
 }
 </style>

src/components/Honghe.vue

 <template>
   <div class="index-box">
-    <div v-for="item in indexJPG" :key="item">
-      <img src="../assets/coverIndex.jpg" />
+    <popup :show="showPopup" @cancel="cancelFrom" />
+    <div>
+      <div>
+        <img class="topImage" src="../assets/hareTop.png" alt />
+      </div>
+    </div>
+    <div class="outer6-wrapper">
+      <div class="outer6 flex-col">
+        <div v-for="item in indexJPG" :key="item" class="section-item">
+          <div @click="baga">
+            <img class="section-item-image" src="../assets/coverIndex.jpg" />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 export default {
   name: 'Honghe',
+  components: {
+    Popup: () => import('@/components/Popup.vue')
+  },
   data() {
     return {
-      indexJPG: new Array(12).fill(0)
-      // indexJPG: [
-      //   {
-      //     id: 1,
-      //     img: "background: url('../assets/coverIndex.jpg') no-repeat;"
-      //   }
-      // ]
+      indexJPG: new Array(12).fill(undefined),
+      showPopup: false
+    }
+  },
+  methods: {
+    //关闭
+    cancelFrom() {
+      this.showPopup = false
+    },
+    baga(e) {
+      console.log(e)
+      this.showPopup = true
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
 .index-box {
-  background: url('../assets/backgroung.jpg') no-repeat;
+  // background: url('../assets/backgroung.jpg') no-repeat;
+  background-color: #c1172d;
   background-size: 100% 100%;
   width: 100%;
   height: 100%;
-  position: fixed;
+  position: relative;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
+
+  .topImage {
+    width: 90%;
+    z-index: 8;
+    overflow-wrap: break-word;
+    text-align: center;
+    white-space: nowrap;
+    align-self: center;
+    margin-top: 20px;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+  }
+  .outer6-wrapper {
+    width: 92vw;
+    border: 1px solid #d0b69a;
+    margin: 16px auto 0;
+
+    .outer6 {
+      flex-flow: row wrap;
+      align-content: flex-start;
+      z-index: 2;
+      background-color: #9c0014;
+      align-self: center;
+      width: 90vw;
+      margin: 3px auto;
+      border-right: 1px solid #d0b69a;
+      border-bottom: 1px solid #d0b69a;
+      overflow: hidden;
+      .section-item {
+        width: 22vw;
+
+        border-left: 1px solid #d0b69a;
+        border-top: 1px solid #d0b69a;
+        display: inline-flex;
+        &-image {
+          width: 22vw;
+
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
 }
 </style>

src/components/Popup.vue

+<template>
+  <div v-if="showSelf" class="dialog" :style="{'z-index': zIndex}">
+    <div class="dialog-mark" @click.self="closeMyself" :style="{'z-index': zIndex + 1}">
+      <transition name="dialog">
+        <div class="dialog-sprite" :style="{'z-index': zIndex + 2}">
+          <div class="dialog-body">
+            <div class="dialog-popuImag">
+              <img src="../assets/popupImg/popuBody.jpg" alt />
+            </div>
+            <div class="dialog-footer">
+              <img @click="cancel" class="btn" src="../assets/popupImg/cancelmage.png" alt />
+            </div>
+          </div>
+          <!-- 右侧 -->
+          <div class="section-box">
+            <div class="section-box-share">
+              <img src="../assets/popupImg/shareImage.png" alt />
+            </div>
+            <div class="section-box-receive">
+              <img src="../assets/popupImg/receiveImage.png" alt />
+            </div>
+            <div class="section-box-save">
+              <img src="../assets/popupImg/saveImage.png" alt />
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Popup',
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    showCancel: {
+      typs: Boolean,
+      default: false,
+      required: false
+    },
+    cancelText: {
+      type: String,
+      default: '取消',
+      required: false
+    },
+    confirmText: {
+      type: String,
+      default: '确定',
+      required: false
+    },
+    LoadingShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      name: 'dialog',
+      showSelf: false,
+      zIndex: this.getZIndex(),
+      bodyOverflow: ''
+    }
+  },
+  watch: {
+    show(val) {
+      console.log('🚀 ~ file: Popup.vue ~ line 78 ~ show ~ val', val)
+      this.showSelf = val
+
+      // if (!val) {
+      //   this.closeMyself()
+      // } else {
+      //   this.showSelf = val
+      // }
+    }
+  },
+  created() {
+    this.showSelf = this.show
+  },
+  mounted() {
+    this.forbidScroll()
+  },
+  methods: {
+    /** 禁止页面滚动 */
+    forbidScroll() {
+      this.bodyOverflow = document.body.style.overflow
+      document.body.style.overflow = 'hidden'
+    },
+
+    /**  每次获取之后 zindex 自动增加 */
+    getZIndex() {
+      let zIndexInit = 2022112
+      return zIndexInit++
+    },
+
+    /** 取消按钮操作 */
+    cancel() {
+      this.$emit('cancel', true)
+    },
+
+    /** 确认按钮操作 */
+    confirm() {
+      this.$emit('confirm', true)
+    },
+
+    /** 点击遮罩关闭弹窗 */
+    closeMyself(event) {
+      // this.sloveBodyOverflow()
+    },
+
+    /** 恢复页面的滚动 */
+    sloveBodyOverflow() {
+      document.body.style.overflow = this.bodyOverflow
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+// 弹窗动画
+.dialog-enter-active,
+.dialog-leave-active {
+  transition: opacity 1s;
+}
+
+.dialog-enter,
+.dialog-leave-to {
+  opacity: 0;
+}
+
+// 最外层 设置position定位
+// 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
+
+.dialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  transition: opacity 1s;
+
+  // 内容层 z-index要比遮罩大，否则会被遮盖
+  .dialog-mark {
+    position: absolute;
+    top: 0;
+    height: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    left: 0;
+    top: 0;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.dialog-sprite {
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  position: relative;
+
+  .header {
+    padding: 15px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #333;
+  }
+  .dialog-body {
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    padding: 0 15px 20px 15px;
+    //中间卡片
+    .dialog-popuImag {
+      position: relative;
+
+      display: flex;
+      justify-content: center;
+      img {
+        width: 48vw;
+      }
+    }
+    //底部按钮
+    .dialog-footer {
+      width: 100%;
+      background-size: 100% auto;
+      margin: 10px auto 0;
+      .btn {
+        padding-top: 0;
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+  .section-box {
+    position: absolute;
+    right: 15vw;
+    top: 98px;
+    height: 394px;
+    display: flex;
+    flex-direction: column;
+    width: 36px;
+    justify-content: space-between;
+
+    img {
+      width: 36px;
+      background-size: 100% auto;
+      margin-top: 0;
+      border-radius: 18px;
+    }
+
+    &-receive {
+      width: 36px;
+      background-size: 100% auto;
+      margin-top: 0;
+    }
+    &-save {
+      width: 36px;
+      border-radius: 18px;
+      background-size: 100% auto;
+      width: 36px;
+      margin-top: 0;
+
+      // background: url('../assets/popupImg/receiveImage.png') no-repeat;
+    }
+  }
+}
+</style>
+