啥玩意儿

.env

@@ -0,0 +1 @@
+VUE_APP_CDN_PATH=/goodsData/

src/assets/data/data.js

@@ -0,0 +1,98 @@
+// type:     straw(手稿)   book(书刊)   tool（用具）  clothing（服装） Italy(油画)--二维才有
+
+/**
+ * name 名字
+ * age 年代
+ * sort 类别
+ * grain 质地
+ * long 长
+ * width 宽
+ * tall 高
+ * author 作者  --二维文物油画才有
+ */
+export const goodsData = {
+  '3D': [
+    // 手稿
+    { bs: 'yht06', type: 'straw', name: '1943年丁行烈士在狱中刻的图章1', age: '', sort: '书法、绘画', grain: '钢，其他金属，其他无机质', long: '13', width: '', tall: '' },
+    { bs: 'yht40', type: 'straw', name: '1943年丁行在狱中手磨制的石笔架1', age: '', sort: '文件、宣传品', grain: '其他无机质', long: '5', width: '1.1', tall: '1.2' },
+    { bs: 'yht49', type: 'straw', name: '民国时期蒋宗銮烈士小学时竹木刻2', age: '', sort: '文件、宣传品', grain: '其他金属', long: '7', width: '1.5', tall: '' },
+    { bs: 'yht06', type: 'straw', name: '1943年丁行烈士在狱中刻的图章', age: '', sort: '书法、绘画', grain: '钢，其他金属，其他无机质', long: '13', width: '', tall: '' },
+    { bs: 'yht40', type: 'straw', name: '1943年丁行在狱中手磨制的石笔架2', age: '', sort: '文件、宣传品', grain: '其他无机质', long: '5', width: '1.1', tall: '1.2' },
+    { bs: 'yht49', type: 'straw', name: '民国时期蒋宗銮烈士小学时竹木刻', age: '', sort: '文件、宣传品', grain: '其他金属', long: '7', width: '1.5', tall: '' },
+    // 书刊
+    { bs: 'yht50', type: 'book', name: '民国时期赵良璋烈士穿过的皮夹克1', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '10' },
+    { bs: 'yht53', type: 'book', name: '二十世纪三十年代郭纲琳烈士在狱中用铜元磨制的铜片1，上刻“健美”二字', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '5.1' },
+    { bs: 'yht50', type: 'book', name: '民国时期赵良璋烈士穿过的皮夹克2', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '10' },
+    { bs: 'yht53', type: 'book', name: '二十世纪三十年代郭纲琳烈士在狱中用铜元磨制的铜片2，上刻“健美”二字', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '5.1' },
+    { bs: 'yht50', type: 'book', name: '民国时期赵良璋烈士穿过的皮夹克3', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '10' },
+    { bs: 'yht53', type: 'book', name: '二十世纪三十年代郭纲琳烈士在狱中用铜元磨制的铜片3，上刻“健美”二字', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '5.1' },
+    // 用具
+    { bs: 'yht55', type: 'tool', name: '民国初期邓中夏穿过的紫色绸质背坎1', age: '', sort: '家具', grain: '瓷，木', long: '', width: '23', tall: '16' },
+    { bs: 'yht61', type: 'tool', name: '1934年卢志英烈士在贵州工作时少数民族赠送给他的毛毯1', age: '', sort: '皮革', grain: '皮革', long: '79.5', width: '47.3', tall: '19.5' },
+    { bs: 'yht55', type: 'tool', name: '民国初期邓中夏穿过的紫色绸质背坎2', age: '', sort: '家具', grain: '瓷，木', long: '', width: '23', tall: '16' },
+    { bs: 'yht61', type: 'tool', name: '1934年卢志英烈士在贵州工作时少数民族赠送给他的毛毯2', age: '', sort: '皮革', grain: '皮革', long: '79.5', width: '47.3', tall: '19.5' },
+    { bs: 'yht55', type: 'tool', name: '民国初期邓中夏穿过的紫色绸质背坎3', age: '', sort: '家具', grain: '瓷，木', long: '', width: '23', tall: '16' },
+    { bs: 'yht61', type: 'tool', name: '1934年卢志英烈士在贵州工作时少数民族赠送给他的毛毯3', age: '', sort: '皮革', grain: '皮革', long: '79.5', width: '47.3', tall: '19.5' },
+    // 服装
+    { bs: 'yht63', type: 'clothing', name: '1933年郭纲琳烈士工作时期戴过的帽子1', age: '', sort: '文具', grain: '石', long: '10', width: '', tall: '2' },
+    { bs: 'yht65', type: 'clothing', name: '民国时期杨斌烈士用过的床单1', age: '', sort: '文具', grain: '铜', long: '10.8', width: '10.8', tall: '3.8' },
+    { bs: 'yht63', type: 'clothing', name: '1933年郭纲琳烈士工作时期戴过的帽子2', age: '', sort: '文具', grain: '石', long: '10', width: '', tall: '2' },
+    { bs: 'yht65', type: 'clothing', name: '民国时期杨斌烈士用过的床单2', age: '', sort: '文具', grain: '铜', long: '10.8', width: '10.8', tall: '3.8' },
+  ],
+  '2D': [
+    // 手稿
+    { imgNum: 3, type: 'book', name: '20世纪20年代高文华烈士北伐时期用的瓷杯', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '10' },
+    { type: 'book', name: '民国时期谢文锦烈士用过的金边碗', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '5.1' },
+    { type: 'book', name: '民国时期杜焕卿烈士用过的漱口杯', age: '', sort: '瓷器', grain: '瓷', long: '', width: '8.8', tall: '10' },
+    { type: 'book', name: '民国时期谢世炎烈士用过的铁皮箱', age: '', sort: '家具', grain: '铁', long: '81.5', width: '47.7', tall: '19.7' },
+    { type: 'book', name: '民国时期谭寿林烈士用过的书箱', age: '', sort: '家具', grain: '木', long: '63.5', width: '30.7', tall: '38.5' },
+    // 书刊
+    { type: 'straw', name: '民国时期赵良璋烈士用过的派克51型钢笔', age: '', sort: '书法、绘画', grain: '钢，其他金属，其他无机质', long: '13', width: '', tall: '' },
+    { type: 'straw', name: '1947年赵良璋在北平刻的"野雪"印章', age: '', sort: '文件、宣传品', grain: '其他无机质', long: '5', width: '1.1', tall: '1.2' },
+    { type: 'straw', name: '民国时期丁行烈士的水晶图章', age: '', sort: '文件、宣传品', grain: '其他金属', long: '7', width: '1.5', tall: '' },
+    { type: 'straw', name: '民国时期邓振询烈士用的私章及盒子', age: '', sort: '文件、宣传品', grain: '其他动物质', long: '2.3', width: '1.1', tall: '' },
+    { type: 'straw', name: '民国时期文绍珍烈士在国民革命军军官学校第六期学生毕业证章', age: '', sort: '文件、宣传品', grain: '铜', long: '6.4', width: '2.6', tall: '' },
+    { type: 'straw', name: '1943年丁行烈士在狱中刻的图章', age: '', sort: '文件、宣传品', grain: '石', long: '4.5', width: '1.6', tall: '' },
+    { type: 'straw', name: '民国时期成贻宾烈士在国立中央大学的校徽', age: '', sort: '文件、宣传品', grain: '铜', long: '', width: '', tall: '' },
+    { type: 'straw', name: '民国时期谭寿林烈士木刻私章（刻有“祝封贵县”）', age: '', sort: '文件、宣传品', grain: '木', long: '', width: '', tall: '' },
+    { type: 'straw', name: '民国时期周镐烈士用过的红玉石印章', age: '', sort: '文件、宣传品', grain: '宝玉石', long: '4', width: '1.5', tall: '1.5' },
+    { type: 'straw', name: '民国时期谢文锦烈士用过的印章', age: '', sort: '文件、宣传品', grain: '石', long: '3', width: '3', tall: '3.5' },
+
+    // 用具
+    { type: 'clothing', name: '民国时期杜焕卿烈士使用过的墨盒', age: '', sort: '文具', grain: '石', long: '10', width: '', tall: '2' },
+    { type: 'clothing', name: '民国时期谢士炎烈士用过的墨盒', age: '', sort: '文具', grain: '铜', long: '10.8', width: '10.8', tall: '3.8' },
+    { type: 'clothing', name: '民国时期蒋传宗烈士用过的钢笔', age: '', sort: '文具', grain: '其他无机质', long: '13', width: '1.3', tall: '' },
+    { type: 'clothing', name: '1927年夏雨初烈士在郎溪组织农民起义时用的梭镖', age: '', sort: '武器', grain: '铁', long: '30', width: '4.7', tall: '' },
+    { type: 'clothing', name: '吕惠生1943年用过的大刀', age: '', sort: '武器', grain: '其他金属', long: '68.6', width: '6.6', tall: '' },
+    { type: 'clothing', name: '民国时期国民党宪兵司令部的奠基纪念碑', age: '', sort: '玺印符牌', grain: '石', long: '93', width: '51', tall: '10' },
+    { type: 'clothing', name: '1928年冯玉祥送给谢庆云烈士的象牙筷一双', age: '', sort: '牙骨角器', grain: '棉麻纤维', long: '22', width: '', tall: '' },
+    { type: 'clothing', name: '民国时期蒋宗銮烈士小学时竹木刻', age: '', sort: '竹木雕', grain: '木', long: '21', width: '6', tall: '' },
+    // 服装
+    { type: 'tool', name: '民国时期朱杏南烈士工作时联络做暗号用的陶瓷花盆和茶几', age: '', sort: '家具', grain: '瓷，木', long: '', width: '23', tall: '16' },
+    { type: 'tool', name: '民国时期石淳烈士用过的皮箱', age: '', sort: '皮革', grain: '皮革', long: '79.5', width: '47.3', tall: '19.5' },
+    { type: 'tool', name: '民国时期焦恭士烈士用过的皮箱', age: '', sort: '皮革', grain: '皮革', long: '29.5', width: '17.6', tall: '8.5' },
+    { type: 'tool', name: '民国时期何宝珍用过的皮箱', age: '', sort: '皮革', grain: '皮革', long: '65.4', width: '38.5', tall: '19.6' },
+    { type: 'tool', name: '抗战时期周镐烈士用过的皮包', age: '', sort: '皮革', grain: '皮革', long: '28', width: '39', tall: '' },
+    { type: 'tool', name: '民国时期文绍珍烈士用过的黄皮文件包', age: '', sort: '皮革', grain: '皮革', long: '33', width: '26', tall: '' },
+    { type: 'tool', name: '民国时期赵良璋烈士飞行时用的美国光学公司制造的飞行员护目眼镜盒', age: '', sort: '其他', grain: '其他金属', long: '22', width: '8.4', tall: '5.2' },
+    { type: 'tool', name: '民国时期郭纲琳烈士戴过的瑞士方形女表', age: '', sort: '其他', grain: '其他金属', long: '20.8', width: '1.5', tall: '' },
+    { type: 'tool', name: '民国时期吕惠生烈士用过的手电筒', age: '', sort: '其他', grain: '其他金属', long: '18.7', width: '4.1', tall: '' },
+    { type: 'tool', name: '民国时期夏雨初烈士用过的铜锁', age: '', sort: '其他', grain: '铜', long: '7.5', width: '1.5', tall: '3.3' },
+    { type: 'tool', name: '1930年夏雨初烈士就义时戴的眼镜', age: '', sort: '其他', grain: '玻璃,其他无机质', long: '11.8', width: '5.2', tall: '' },
+    { type: 'tool', name: '民国时期夏雨初烈士使用的油灯', age: '', sort: '其他', grain: '铜', long: '14', width: '10.5', tall: '' },
+    { type: 'tool', name: '1947年卢志英烈士在上海工作时使用的怀表', age: '', sort: '其他', grain: '铜，其他金属', long: '', width: '', tall: '' },
+    { type: 'tool', name: '二十世纪三十年代郭纲琳烈士在狱中用铜元磨的鸡心，刻有“永是勇士”', age: '', sort: '其他', grain: '铜', long: '2.5', width: '1.5', tall: '' },
+    { type: 'tool', name: '民国时期文绍珍烈士用过的闹钟', age: '', sort: '其他', grain: '铜，其他金属', long: '', width: '', tall: '' },
+    { type: 'tool', name: '二十世纪三十年代郭纲琳烈士狱中磨制的铜圆', age: '', sort: '钱币', grain: '铜', long: '', width: '', tall: '' },
+    { type: 'tool', name: '民国时期文绍珍烈士用过的剪刀', age: '', sort: '铁器、其他金属器', grain: '铁', long: '23', width: '9.6', tall: '' },
+    { type: 'tool', name: '民国时期谢士炎烈士用过的铜压条', age: '', sort: '铜器', grain: '铜', long: '25', width: '3', tall: '' },
+    { type: 'tool', name: '民国时期胡廷俊烈士自制砚台', age: '', sort: '文具', grain: '石', long: '10.5', width: '9.8', tall: '2.2' },
+    // 油画
+    { author: '作者1', type: 'Italy', name: '启蒙', age: '1999', sort: '油 画', grain: '', long: '2.03', width: '2.45', tall: '' },
+    { author: '作者1', type: 'Italy', name: '邓演达主持农工党一干会议', age: '1999', sort: '油 画', grain: '', long: '2.25', width: '3.27', tall: '' },
+    { author: '作者1', type: 'Italy', name: '被    捕', age: '1987', sort: '油 画', grain: '', long: '3.0 ', width: '2.4', tall: '' },
+    { author: '作者1', type: 'Italy', name: '在青年中间', age: '1987', sort: '油 画', grain: '', long: '2.04', width: '2.04', tall: '' },
+    { author: '作者1', type: 'Italy', name: '演    说', age: '1987', sort: '油 画', grain: '', long: '3.03', width: '1.95', tall: '' },
+    { author: '作者1', type: 'Italy', name: '马克昌就义', age: '1987', sort: '油 画', grain: '', long: '1.92', width: '2.01', tall: '' },
+  ]
+}

src/components/RelicItem.vue

@@ -62,7 +62,7 @@ export default {
   },
   methods: {
     onClickRelicInfo() {
-      this.$router.push({ name: 'RelicDetail' })
+      this.$emit('click')
     }
   },
 }

src/config.js

@@ -1,5 +1,4 @@
 export default {
-  version: 'v20221018.1122',
   zIndex: {
     topBar: {
       self: '3',

src/main.js

@@ -7,7 +7,7 @@ import "@/assets/style/reset.css"
 import "@/assets/style/my-reset.css"
 import clickOutside from "@/directives/v-click-outside.js"
 
-console.log(globalConfig.version)
+console.log(`version: ${process.env.VUE_APP_VERSION}`)
 
 // 供全局使用的audio节点
 const audioNode = document.createElement("audio")
@@ -26,6 +26,7 @@ if (uaInfo.browser && uaInfo.browser.name === 'Safari') {
 }
 
 Vue.prototype.$globalConfig = globalConfig
+Vue.prototype.$cdnPath = process.env.VUE_APP_CDN_PATH
 
 const idealWindowInnerWidth = 2436 // 设计稿的宽度
 const idealRootFontSize = 24 // 设计稿里选择的根元素尺寸

src/views/RelicDetail.vue

@@ -85,7 +85,6 @@ export default {
     return {
       title: '',
       dimNumber: 0,
-      desc: '',
       iframeSrc: '',
       imageList: [],
       detailInfo: [],
@@ -94,19 +93,26 @@ export default {
     }
   },
   mounted() {
-    this.title = `i'm title`
-    this.dimNumber = 2
-    this.desc = 'skfdksdfgkljsldf'
+    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 = ['https://4dkk-culture.oss-cn-shenzhen.aliyuncs.com/one_day_in_southern_song_dynasty/cdn_data/%E4%BA%8C%E7%BB%B4%E6%96%87%E7%89%A9%E7%83%AD%E7%82%B9%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/%E4%B8%B4%E5%AE%89%E5%BA%9C%E8%A1%8C%E7%94%A8%E9%92%B1%E7%89%8C/%E4%B8%B4%E5%AE%89%E5%BA%9C%E8%A1%8C%E7%94%A8%E9%92%B1%E7%89%8C1.jpg']
+    this.imageList = [`${this.$cdnPath}3D/${this.$route.query.bs}.png`]
     this.detailInfo = [
       {
-        key: 'a',
-        value: 'b',
+        key: '年代',
+        value: this.$route.query.age,
       },
       {
-        key: 'a',
-        value: 'b',
+        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`,
       },
     ]
   }

src/views/RelicsAppr.vue

@@ -100,14 +100,15 @@
       class="relics-list-3d"
     >
       <RelicItem
-        v-for="index in 10"
+        v-for="(item, index) in list3d"
         :key="index"
         :is-odd="!!(index % 2)"
         :is-first="index === 1"
         :is-last="index === 10"
-        :relic-image="require('@/assets/images/button-to-panos.png')"
-        :relic-title="'我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题'"
+        :relic-image="`${$cdnPath}3D/${item.bs}.png`"
+        :relic-title="item.name"
         class="relic-item"
+        @click="$router.push({ name: 'RelicDetail' , query: {...item, ...{dimNumber: 3}} })"
       />
     </div>
 
@@ -151,6 +152,7 @@
 
 <script>
 import RelicItem from '@/components/RelicItem.vue'
+import { goodsData as rawData } from "@/assets/data/data.js"
 
 export default {
   components: { RelicItem },
@@ -185,9 +187,15 @@ export default {
     }
   },
   computed: {
+    list3d() {
+      return rawData['3D']
+    },
+    list2d() {
+      return rawData['2D']
+    },
     hasData() {
       return true
-    }
+    },
   },
   methods: {
     onClickFakeInput() {

vue.config.js

@@ -1,6 +1,8 @@
 const webpack = require('webpack')
 const { defineConfig } = require('@vue/cli-service')
 
+process.env.VUE_APP_VERSION = require('./package.json').version
+
 module.exports = defineConfig({
   transpileDependencies: true,
   configureWebpack: {