up

web/src/views/Collections/index.vue

@@ -25,10 +25,15 @@
       </ul>
       <!-- 右侧内容 -->
       <div class="right">
-        <div class="row" v-for="(item, index) in data" :key="item.id">
+        <div
+          class="row"
+          v-for="(item, index) in data"
+          :key="item.id"
+          @click="lookBig(item)"
+        >
           <img
             class="rowImg"
-            :src="`/data/Collections/Bronzes/${index + 1}.png`"
+            :src="`/data/Collections/${mbTxt}/${index + 1}.png`"
             alt=""
           />
           <div class="info">
@@ -41,19 +46,23 @@
       </div>
     </div>
     <!-- 查看详情组件 -->
-    <CollectionsInfo />
+    <CollectionsInfo v-if="isShow" :isShow.sync="isShow" :infoObj="infoObj" />
   </div>
 </template>
 
 <script>
-import CollectionsInfo from './component/info.vue'
+import CollectionsInfo from "./component/info.vue";
 import { Collections } from "@/views/dataAll.js";
 export default {
   name: "Collections",
-  components: {CollectionsInfo},
+  components: { CollectionsInfo },
   data() {
     //这里存放数据
     return {
+      // 点击单个查看图片
+      isShow: false,
+      infoObj: {},
+      // ---------
       data: [],
       mbTxt: "Bronzes",
       tabInd: 0,
@@ -78,6 +87,16 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 点击单个查看图片
+    lookBig(item) {
+      this.infoObj = item;
+      this.isShow = true;
+      this.$nextTick(() => {
+        // 获取body，防止滚动
+        let body = document.querySelector("body");
+        body.style.overflow = "hidden";
+      });
+    },
     cutTab(index, path) {
       this.tabInd = index;
       this.data = Collections[path];
@@ -339,5 +358,44 @@ export default {
       }
     }
   }
+  .Ceramics {
+    height: 1603px;
+    .row {
+      &:nth-of-type(4) {
+        top: 411px;
+      }
+      &:nth-of-type(7) {
+        left: 650px;
+        top: 990px;
+      }
+      &:nth-of-type(8) {
+        left: 330px;
+        top: 1054px;
+      }
+    }
+  }
+  .Buddhist {
+    height: 1870px;
+    .row {
+      &:nth-of-type(4) {
+        top: 347px;
+      }
+      &:nth-of-type(5) {
+        top: 587px;
+      }
+      &:nth-of-type(6) {
+        top: 653px;
+      }
+      &:nth-of-type(7) {
+        top: 944px;
+      }
+      &:nth-of-type(8) {
+        top: 1146px;
+      }
+      &:nth-of-type(9) {
+        top: 1252px;
+      }
+    }
+  }
 }
 </style>

web/src/views/layout/index.vue

@@ -135,7 +135,7 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 999;
+  z-index: 990;
   .mainbav_wrap {
     width: 1300px;
     margin: 0 auto;