搞搞搞

src/App.vue

@@ -3,12 +3,22 @@
 </template>
 
 <script>
+import { mapMutations } from "vuex"
 // import { onClickOutside } from '@vueuse/core'
-
 export default {
   inject: ['$uaInfo', '$env'],
+  methods: {
+    ...mapMutations([
+      'setData',
+    ])
+  },
   mounted() {
-  }
+    const query = new URLSearchParams(location.href.split('?')[1])
+    api.getData(query.get('themeIdx')).then((res) => {
+      console.log('res: ', res)
+      this.setData(res)
+    })
+  },
 }
 </script>
 

src/api.js

@@ -1,4 +1,4 @@
-// import axios from "axios"
+import axios from "axios"
 
 // axios({
 //   method: 'post',
@@ -14,4 +14,28 @@
 // })
 
 export default {
+  getData(idx) {
+    let url = 'https://houseoss.4dkankan.com/project/yzdyh-h5/'
+    switch (idx) {
+    case '0': // 石碑
+      url += 'monument/monumentData.json'
+      break
+    case '1': // 舟辑
+      url += 'book-fair/bookFairData.json'
+      break
+    default:
+      break
+    }
+    return axios({
+      method: 'get',
+      url,
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: {
+      },
+    }).then((res) => {
+      return res.data[0]
+    })
+  }
 }

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/Home.vue'
 import UnitList from '../views/UnitList.vue'
 import RelicList from '../views/RelicList.vue'
+import RelicDetail from '../views/RelicDetail.vue'
 // import store from '@/store/index.js'
 
 const routes = [
@@ -20,6 +21,11 @@ const routes = [
     name: 'RelicList',
     component: RelicList,
   },
+  {
+    path: '/relic-detail',
+    name: 'RelicDetail',
+    component: RelicDetail,
+  },
 ]
 
 const router = createRouter({

src/store/index.js

@@ -2,14 +2,14 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    usingChinese: true,
+    data: null
   },
   getters: {
   },
   mutations: {
-    setUsingChinese(state, value) {
-      state.usingChinese = value
-    },
+    setData(state, data) {
+      state.data = data
+    }
   },
   actions: {
   },

src/views/Home.vue

@@ -2,6 +2,12 @@
   <div
     class="home"
   >
+    <img
+      src="@/assets/images/home-title.jpg"
+      alt=""
+      class="title"
+      draggable="false"
+    >
     <button
       class="begin"
       @click="onClickBegin"
@@ -26,8 +32,6 @@ export default {
   unmounted() {
   },
   methods: {
-    ...mapMutations([
-    ]),
     onClickBegin() {
       this.$router.push({
         name: 'UnitList',
@@ -43,9 +47,16 @@ export default {
   height: 100%;
   position: relative;
   background-image: url(@/assets/images/home-bg.jpg);
-  background-size: contain;
+  background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
+  >img.title{
+    position: absolute;
+    top: 0;
+    left: 50%;
+    height: 100%;
+    transform: translateX(-50%);
+  }
   >button.begin{
     position: absolute;
     bottom: 58px;

src/views/UnitList.vue

@@ -5,68 +5,21 @@
         前言
       </h3>
       <p class="foreword">
-        这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言
+        {{ data?.preface }}
       </p>
       <ul>
         <li
+          v-for="(item, idx) in data?.list"
+          :key="item.id"
           @click="$router.push({
             name: 'RelicList',
             query: {
-              idx: '0',
+              unitIdx: idx,
             },
           })"
         >
-          <h3>章节标题</h3>
-          <p>章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容</p>
-          <button class="detail-entry">
-            藏品鉴赏
-            <img
-              class="arrow"
-              src="@/assets/images/red-arrow-right.png"
-              alt=""
-              draggable="false"
-            >
-          </button>
-        </li>
-        <li>
-          <h3>章节标题</h3>
-          <p>章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容</p>
-          <button class="detail-entry">
-            藏品鉴赏
-            <img
-              class="arrow"
-              src="@/assets/images/red-arrow-right.png"
-              alt=""
-              draggable="false"
-            >
-          </button>
-        </li><li>
-          <h3>章节标题</h3>
-          <p>章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容</p>
-          <button class="detail-entry">
-            藏品鉴赏
-            <img
-              class="arrow"
-              src="@/assets/images/red-arrow-right.png"
-              alt=""
-              draggable="false"
-            >
-          </button>
-        </li><li>
-          <h3>章节标题</h3>
-          <p>章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容</p>
-          <button class="detail-entry">
-            藏品鉴赏
-            <img
-              class="arrow"
-              src="@/assets/images/red-arrow-right.png"
-              alt=""
-              draggable="false"
-            >
-          </button>
-        </li><li>
-          <h3>章节标题</h3>
-          <p>章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容</p>
+          <h3>{{ item.label }}</h3>
+          <p>{{ item.info }}</p>
           <button class="detail-entry">
             藏品鉴赏
             <img
@@ -83,17 +36,23 @@
 </template>
 
 <script>
+import { mapState } from "vuex"
 export default {
   data() {
     return {
       isExpand: false,
     }
   },
+  computed: {
+    ...mapState([
+      'data'
+    ])
+  },
+  mounted() {
+    console.log(this.data, 'dskfjslkfj')
+  },
   methods: {
-    onClickExpandShrink() {
-      this.isExpand = !this.isExpand
-    }
-  }
+  },
 }
 </script>
 
@@ -141,6 +100,7 @@ export default {
         align-items: center;
         width: 76.4vw;
         cursor: pointer;
+        margin-bottom: 10px;
         &:hover{
           box-shadow: 3px 6px 19px 0px rgba(61, 34, 3, 0.2);
           >h3{