1

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import HomeView from '../views/Home.vue'
+import HomeView from '@/views/Home.vue'
+import RelicDetail from "@/views/RelicDetail.vue"
 // import store from '@/store/index.js'
 
 const routes = [
@@ -8,6 +9,11 @@ const routes = [
     name: 'home-view',
     component: HomeView,
   },
+  {
+    path: '/relic-detail',
+    name: 'RelicDetail',
+    component: RelicDetail,
+  }
 ]
 
 const router = createRouter({

src/views/Home.vue

@@ -11,6 +11,7 @@
         <li
           v-for="item in Object.entries($gConfigInfo.objInfo).slice(pageSize * (currentPage - 1), pageSize * currentPage)"
           :key="item[0]"
+          @click="onClickItem"
         >
           <img
             class=""
@@ -59,6 +60,9 @@ export default {
   methods: {
     ...mapMutations([
     ]),
+    onClickItem(item) {
+      this.$router.push({ name: 'RelicDetail' })
+    }
   },
 }
 </script>
@@ -89,31 +93,32 @@ export default {
       height: 50px;
       background: url('@/assets/images/titleBac.png') no-repeat center;
       background-size: 100% 100%;
-      margin-bottom: 20px;
     }
     > ul {
       width: 100%;
-      height: calc(100% - 70px);
+      height: calc(100% - 80px);
+      padding-top: 30px;
       padding-left: 20px;
       display: flex;
       flex-wrap: wrap;
+      align-content: start;
       overflow: auto;
       > li {
         display: inline-block;
         width: calc((100% - 20px * 4) / 3 - 1px);
         margin-right: 20px;
         margin-bottom: 20px;
+        cursor: pointer;
+        transition: all 0.3s;
+        &:hover {
+          transform: translateY(-10px);
+        }
         > img {
           width: 100%;
           padding: 10px;
           background: url(@/assets/images/divBac.png);
           background-size: 100% 100%;
           box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
-          transition: all 0.3s;
-          cursor: pointer;
-          &:hover {
-            transform: translateY(-10px);
-          }
         }
         > .title {
           color: #fff;

src/views/RelicDetail.vue

@@ -0,0 +1,12 @@
+<template>
+  <div />
+</template>
+
+<script>
+// import { } from "@/libs/4dage.js"
+
+</script>
+
+<style lang="less" scoped>
+
+</style>