1

src/views/RelicDetail.vue

@@ -1,220 +1,222 @@
-<template>
-  <div class="relic-detail">
-    <div
-      v-if="!isShowDesc"
-      class="preview"
-    >
-      <h1>{{ title }}</h1>
-      <iframe
-        v-if="dimNumber === 3"
-        :src="iframeSrc"
-        frameborder="0"
-        class="display-3d"
-      />
-      <img
-        v-if="dimNumber === 2"
-        class="photo"
-        :src="imageList[0]"
-        alt=""
-        draggable="false"
-      >
-      <div class="btn-group">
-        <button
-          @click="isShowDesc = true"
-        >
-          <img
-            src="@/assets/images/desc.png"
-            alt="详情"
-            draggable="false"
-          >
-        </button>
-        <button
-          @click="$router.go(-1)"
-        >
-          <img
-            src="@/assets/images/close.png"
-            alt="关闭"
-            draggable="false"
-          >
-        </button>
-      </div>
-    </div>
-    <article
-      v-if="isShowDesc"
-      class="desc"
-    >
-      <button
-        class="close-btn"
-        @click="isShowDesc = false"
-      >
-        <img
-          src="@/assets/images/close.png"
-          alt="关闭"
-          draggable="false"
-        >
-      </button>
-      <img
-        class="photo"
-        :src="imageList[0]"
-        alt=""
-        draggable="false"
-      >
-      <h1>{{ title }}</h1>
-      <ul>
-        <li
-          v-for="(item, index) in detailInfo"
-          :key="index"
-          class="desc-item"
-        >
-          {{ item.key }}：{{ item.value }}
-        </li>
-      </ul>
-    </article>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    id: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      title: '',
-      dimNumber: 0,
-      iframeSrc: '',
-      imageList: [],
-      detailInfo: [],
-
-      isShowDesc: false,
-    }
-  },
-  mounted() {
-    this.title = this.$route.query.name
-    this.dimNumber = this.$route.query.dimNumber
-    this.iframeSrc = 'https://4dscene.4dage.com/culturalrelics/NSRDYT/Model2.html?m=nsr03'
-    this.imageList = [`${this.$cdnPath}3D/${this.$route.query.bs}.png`]
-    this.detailInfo = [
-      {
-        key: '年代',
-        value: this.$route.query.age,
-      },
-      {
-        key: '类别',
-        value: this.$route.query.sort,
-      },
-      {
-        key: '质地',
-        value: this.$route.query.grain,
-      },
-      {
-        key: '尺寸',
-        value: `${this.$route.query.long}*${this.$route.query.width}*${this.$route.query.tall}cm`,
-      },
-    ]
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.relic-detail {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(246,239,217,0.8);
-  backdrop-filter: blur(1.04rem);
-  > .preview {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    align-items: center;
-    padding: 0 1.67rem 5rem 1.67rem;
-    > h1 {
-      font-size: 2rem;
-      font-weight: bold;
-      color: #930909;
-      line-height: 2.34rem;
-      width: 60%;
-      align-self: flex-start;
-      flex: 0 0 auto;
-    }
-    > iframe {
-      width: 100%;
-      height: 60%;
-    }
-    > .photo {
-      width: 100%;
-      max-height: 60%;
-      object-fit: contain;
-    }
-    .btn-group {
-      flex: 0 0 auto;
-      > button {
-        width: 6.25rem;
-        height: 6.25rem;
-        > img {
-          width: 100%;
-          height: 100%;
-        }
-        &:nth-of-type(2) {
-          margin-left: 4.38rem;
-        }
-      }
-    }
-  }
-  > .desc {
-    position: absolute;
-    left: 4.7rem;
-    right: 4.7rem;
-    top: 9.75rem;
-    bottom: 14rem;
-    background: #930909;
-    border-top: solid 0.78rem #CEA763;
-    border-bottom: solid 0.78rem #CEA763;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 2.92rem 3rem;
-    .close-btn {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 6.25rem;
-      height: 6.25rem;
-      transform: translate(50%, -50%);
-      > img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .photo {
-      width: 100%;
-      max-height: 40%;
-      object-fit: contain;
-    }
-    > h1 {
-      margin-top: 2.29rem;
-      font-size: 2rem;
-      font-weight: bold;
-      color: #CEA763;
-      line-height: 2.34rem;
-    }
-    > ul {
-      margin-top: 1.29rem;
-      > li {
-        font-size: 1.67rem;
-        color: #FFFFFF;
-        line-height: 2.92rem;
-        display: block;
-      }
-    }
-  }
-}
+<template>
+  <div class="relic-detail">
+    <div
+      v-if="!isShowDesc"
+      class="preview"
+    >
+      <h1>{{ title }}</h1>
+      <iframe
+        v-if="dimNumber === 3"
+        :src="iframeSrc"
+        frameborder="0"
+        class="display-3d"
+      />
+      <img
+        v-if="dimNumber === 2"
+        class="photo"
+        :src="imageList[0]"
+        alt=""
+        draggable="false"
+      >
+      <div class="btn-group">
+        <button
+          @click="isShowDesc = true"
+        >
+          <img
+            src="@/assets/images/desc.png"
+            alt="详情"
+            draggable="false"
+          >
+        </button>
+        <button
+          @click="$router.go(-1)"
+        >
+          <img
+            src="@/assets/images/close.png"
+            alt="关闭"
+            draggable="false"
+          >
+        </button>
+      </div>
+    </div>
+    <article
+      v-if="isShowDesc"
+      class="desc"
+    >
+      <button
+        class="close-btn"
+        @click="isShowDesc = false"
+      >
+        <img
+          src="@/assets/images/close.png"
+          alt="关闭"
+          draggable="false"
+        >
+      </button>
+      <img
+        class="photo"
+        :src="imageList[0]"
+        alt=""
+        draggable="false"
+      >
+      <h1>{{ title }}</h1>
+      <ul>
+        <li
+          v-for="(item, index) in detailInfo"
+          :key="index"
+          class="desc-item"
+        >
+          {{ item.key }}：{{ item.value }}
+        </li>
+      </ul>
+    </article>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      title: '',
+      dimNumber: 0,
+      iframeSrc: '',
+      imageList: [],
+      detailInfo: [],
+
+      isShowDesc: false,
+    }
+  },
+  mounted() {
+    this.title = this.$route.query.name
+    this.dimNumber = this.$route.query.dimNumber
+    this.iframeSrc = 'https://4dscene.4dage.com/culturalrelics/NSRDYT/Model2.html?m=nsr03'
+    this.imageList = [`${this.$cdnPath}3D/${this.$route.query.bs}.png`]
+    this.detailInfo = [
+      {
+        key: '年代',
+        value: this.$route.query.age,
+      },
+      {
+        key: '类别',
+        value: this.$route.query.sort,
+      },
+      {
+        key: '质地',
+        value: this.$route.query.grain,
+      },
+      {
+        key: '尺寸',
+        value: [this.$route.query.long, this.$route.query.width, this.$route.query.tall].filter((item) => {
+          return !!item
+        }).join('*') + 'cm',
+      },
+    ]
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.relic-detail {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(246,239,217,0.8);
+  backdrop-filter: blur(1.04rem);
+  > .preview {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 0 1.67rem 5rem 1.67rem;
+    > h1 {
+      font-size: 2rem;
+      font-weight: bold;
+      color: #930909;
+      line-height: 2.34rem;
+      width: 60%;
+      align-self: flex-start;
+      flex: 0 0 auto;
+    }
+    > iframe {
+      width: 100%;
+      height: 60%;
+    }
+    > .photo {
+      width: 100%;
+      max-height: 60%;
+      object-fit: contain;
+    }
+    .btn-group {
+      flex: 0 0 auto;
+      > button {
+        width: 6.25rem;
+        height: 6.25rem;
+        > img {
+          width: 100%;
+          height: 100%;
+        }
+        &:nth-of-type(2) {
+          margin-left: 4.38rem;
+        }
+      }
+    }
+  }
+  > .desc {
+    position: absolute;
+    left: 4.7rem;
+    right: 4.7rem;
+    top: 9.75rem;
+    bottom: 14rem;
+    background: #930909;
+    border-top: solid 0.78rem #CEA763;
+    border-bottom: solid 0.78rem #CEA763;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 2.92rem 3rem;
+    .close-btn {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 6.25rem;
+      height: 6.25rem;
+      transform: translate(50%, -50%);
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .photo {
+      width: 100%;
+      max-height: 40%;
+      object-fit: contain;
+    }
+    > h1 {
+      margin-top: 2.29rem;
+      font-size: 2rem;
+      font-weight: bold;
+      color: #CEA763;
+      line-height: 2.34rem;
+    }
+    > ul {
+      margin-top: 1.29rem;
+      > li {
+        font-size: 1.67rem;
+        color: #FFFFFF;
+        line-height: 2.92rem;
+        display: block;
+      }
+    }
+  }
+}
 </style>

src/router/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import RelicsAppr from "@/views/RelicsAppr.vue"
-import RelicDetail from "@/views/RelicDetail.vue"
+import RelicDetail from "@/components/RelicDetail.vue"
 
 Vue.use(VueRouter)