feat: 典藏详情页

public/staticConfig.js

@@ -306,7 +306,8 @@ var staticConfig = {
       sort: '文具',
       size: '13*1.3厘米',
       grain: '钢，其他金属，其他无机质',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -316,7 +317,8 @@ var staticConfig = {
       sort: '文件、宣传品',
       size: '5*1.2*1.2厘米',
       grain: '其他金属',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -326,7 +328,8 @@ var staticConfig = {
       sort: '文件、宣传品',
       size: '7*1.5*1.5厘米',
       grain: '其他无机质、其他金属',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -336,7 +339,8 @@ var staticConfig = {
       sort: '文件、宣传品',
       size: '印章2.3*1.1*1.1',
       grain: '其他无机质、木',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -346,7 +350,8 @@ var staticConfig = {
       sort: '文件、宣传品',
       size: '3.2*2.6厘米',
       grain: '铜',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -356,7 +361,8 @@ var staticConfig = {
       sort: '文件、宣传品',
       size: '4.5*1.6*1.6厘米',
       grain: '石',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'book',
@@ -366,7 +372,8 @@ var staticConfig = {
       sort: '文件、宣传品',
       size: '等边三角形，边长 4 厘米，直径3.4厘米',
       grain: '铜',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'book',
@@ -376,7 +383,8 @@ var staticConfig = {
       sort: '文件、宣传品',
       size: '梯形立方体，上边长1.5厘米,下边长2厘米，高2.7厘米',
       grain: '木',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -386,7 +394,8 @@ var staticConfig = {
       sort: '文件、宣传品',
       size: '印章4*1.5*1.5 印章盒长7.5厘米，宽2.5厘米，高3厘米',
       grain: '宝玉石',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -396,7 +405,8 @@ var staticConfig = {
       sort: '文件、宣传品',
       size: '3*3*3.5厘米',
       grain: '石',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -406,7 +416,8 @@ var staticConfig = {
       sort: '文件、宣传品',
       size: '直径3.8厘米',
       grain: '银',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -416,7 +427,8 @@ var staticConfig = {
       sort: '瓷器',
       size: '直径20.3厘米',
       grain: '瓷',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -426,7 +438,8 @@ var staticConfig = {
       sort: '瓷器',
       size: '直径20.3厘米',
       grain: '其他无机质',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -436,7 +449,8 @@ var staticConfig = {
       sort: '瓷器',
       size: '直径10.8厘米，高10厘米',
       grain: '其他无机质',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -446,7 +460,8 @@ var staticConfig = {
       sort: '瓷器',
       size: '口径12厘米，底径6厘米，碗高5.1厘米',
       grain: '瓷',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -456,7 +471,8 @@ var staticConfig = {
       sort: '瓷器',
       size: '直径8.8厘米，高10厘米',
       grain: '瓷',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -466,7 +482,8 @@ var staticConfig = {
       sort: '家具',
       size: '81.5*47.7*19.7厘米',
       grain: '铁、皮革',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -476,7 +493,8 @@ var staticConfig = {
       sort: '家具',
       size: '63.5*30.7*38.5厘米',
       grain: '木',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -486,7 +504,8 @@ var staticConfig = {
       sort: '家具',
       size: '花盆口径27厘米，底径12厘米高16厘米 花几高73厘米',
       grain: '瓷，木',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -496,7 +515,8 @@ var staticConfig = {
       sort: '皮革',
       size: '79.5*47.3*19.5厘米',
       grain: '皮革',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -506,7 +526,8 @@ var staticConfig = {
       sort: '皮革',
       size: '29.5*17.6*8.5厘米',
       grain: '皮革',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -516,7 +537,8 @@ var staticConfig = {
       sort: '皮革',
       size: '29.5*17.6*8.5厘米',
       grain: '皮革',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -526,7 +548,8 @@ var staticConfig = {
       sort: '皮革',
       size: '65.4*38.5*19.6厘米',
       grain: '皮革',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -536,7 +559,8 @@ var staticConfig = {
       sort: '皮革',
       size: '28*39*3厘米',
       grain: '皮革',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -546,7 +570,8 @@ var staticConfig = {
       sort: '皮革',
       size: '33*26*2厘米',
       grain: '皮革',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -556,7 +581,8 @@ var staticConfig = {
       sort: '其他',
       size: '22*8.4*5.2厘米',
       grain: '其他金属',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -566,7 +592,8 @@ var staticConfig = {
       sort: '其他',
       size: '22*8.4*5.2厘米',
       grain: '其他金属',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -576,7 +603,8 @@ var staticConfig = {
       sort: '其他',
       size: '表盘1.5*1厘米',
       grain: '其他金属',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -586,7 +614,8 @@ var staticConfig = {
       sort: '其他',
       size: '18.7*4.1厘米',
       grain: '其他金属',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -596,7 +625,8 @@ var staticConfig = {
       sort: '其他',
       size: '7.5*1.5*3.3厘米',
       grain: '铜',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -606,7 +636,8 @@ var staticConfig = {
       sort: '其他',
       size: '11.8*5.2厘米',
       grain: '玻璃,其他无机质',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -616,7 +647,8 @@ var staticConfig = {
       sort: '其他',
       size: '14*10.5厘米',
       grain: '铜',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -626,7 +658,8 @@ var staticConfig = {
       sort: '其他',
       size: '直径4厘米，表链长 20厘米',
       grain: '铜，其他金属',
-      estate: '一级'
+      estate: '一级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -636,7 +669,8 @@ var staticConfig = {
       sort: '其他',
       size: '2.5*1.5厘米',
       grain: '铜',
-      estate: '一级'
+      estate: '一级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -646,7 +680,8 @@ var staticConfig = {
       sort: '其他',
       size: '直径12厘米',
       grain: '铜，其他金属',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -656,7 +691,8 @@ var staticConfig = {
       sort: '钱币',
       size: '直径2.8厘米',
       grain: '铜',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -666,7 +702,8 @@ var staticConfig = {
       sort: '铁器、其他金属器',
       size: '23*9.6厘米',
       grain: '铁',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -676,7 +713,8 @@ var staticConfig = {
       sort: '铜器',
       size: '25*3*0.8厘米',
       grain: '铜',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -686,7 +724,8 @@ var staticConfig = {
       sort: '文具',
       size: '10.5*9.8*2.2厘米',
       grain: '石',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -696,7 +735,8 @@ var staticConfig = {
       sort: '文具',
       size: '13.5*5.7厘米',
       grain: '铁',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -706,7 +746,8 @@ var staticConfig = {
       sort: '文具',
       size: '7*2*2厘米',
       grain: '石',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -716,7 +757,8 @@ var staticConfig = {
       sort: '文具',
       size: '10.8*10.8*3.8厘米',
       grain: '铜',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -726,7 +768,8 @@ var staticConfig = {
       sort: '文具',
       size: '直径10厘米，高2厘米',
       grain: '石',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -736,7 +779,8 @@ var staticConfig = {
       sort: '文具',
       size: '13*1.3厘米',
       grain: '其他无机质',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -746,7 +790,8 @@ var staticConfig = {
       sort: '武器',
       size: '30*4.7厘米',
       grain: '铁',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -756,7 +801,8 @@ var staticConfig = {
       sort: '武器',
       size: '68.6*6.6厘米',
       grain: '其他金属',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -766,7 +812,8 @@ var staticConfig = {
       sort: '玺印符牌',
       size: '93*51*10厘米',
       grain: '石',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -776,7 +823,8 @@ var staticConfig = {
       sort: '牙骨角器',
       size: '直径0.3厘米，长22厘米',
       grain: '骨角牙',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -786,7 +834,8 @@ var staticConfig = {
       sort: '竹木雕',
       size: '21*6厘米',
       grain: '木',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'clothing',
@@ -796,7 +845,8 @@ var staticConfig = {
       sort: '皮革',
       size: '肩宽 47 厘米，衣长 60 厘米',
       grain: '皮革，棉麻纤维',
-      estate: '一级'
+      estate: '一级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -806,7 +856,8 @@ var staticConfig = {
       sort: '皮革',
       size: '26*18*7厘米',
       grain: '皮革',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -816,7 +867,8 @@ var staticConfig = {
       sort: '其他',
       size: '主体最长 16 厘米，最宽 12 厘米；底座最长 21 厘米，最宽 16 厘米',
       grain: '铜，银、木',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -826,7 +878,8 @@ var staticConfig = {
       sort: '其他',
       size: '2.2*2厘米',
       grain: '铜',
-      estate: '一级'
+      estate: '一级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'clothing',
@@ -836,7 +889,8 @@ var staticConfig = {
       sort: '织绣',
       size: '肩宽 48 厘米，衣长 67 厘米',
       grain: '毛,棉麻纤维',
-      estate: '一级'
+      estate: '一级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'clothing',
@@ -846,7 +900,8 @@ var staticConfig = {
       sort: '织绣',
       size: '肩宽50厘米，衣长66厘米',
       grain: '丝',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'clothing',
@@ -856,7 +911,8 @@ var staticConfig = {
       sort: '织绣',
       size: '肩宽55厘米，衣长85厘米',
       grain: '毛、棉麻纤维',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'clothing',
@@ -866,7 +922,8 @@ var staticConfig = {
       sort: '织绣',
       size: '衣长60厘米，肩宽44厘米，袖长31厘米',
       grain: '棉麻纤维',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'clothing',
@@ -876,7 +933,8 @@ var staticConfig = {
       sort: '织绣',
       size: '衣长125厘米，肩宽45厘米',
       grain: '毛,棉麻纤维',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -886,7 +944,8 @@ var staticConfig = {
       sort: '织绣',
       size: '180*130厘米',
       grain: '毛，棉麻纤维',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'clothing',
@@ -896,7 +955,8 @@ var staticConfig = {
       sort: '织绣',
       size: '150*100厘米',
       grain: '毛，棉麻纤维',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -906,7 +966,8 @@ var staticConfig = {
       sort: '织绣',
       size: '直径22厘米',
       grain: '毛、棉麻纤维',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'clothing',
@@ -916,7 +977,8 @@ var staticConfig = {
       sort: '织绣',
       size: '肩宽47厘米，衣长72厘米，裤长103厘米',
       grain: '棉麻纤维',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -926,7 +988,8 @@ var staticConfig = {
       sort: '织绣',
       size: '150*80厘米',
       grain: '棉麻纤维',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'clothing',
@@ -936,7 +999,8 @@ var staticConfig = {
       sort: '皮革',
       size: '皮鞋长28厘米',
       grain: '皮革',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'clothing',
@@ -946,7 +1010,8 @@ var staticConfig = {
       sort: '皮革',
       size: '大衣肩宽57厘米，衣长86厘米',
       grain: '棉麻纤维',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'clothing',
@@ -956,7 +1021,8 @@ var staticConfig = {
       sort: '皮革',
       size: '背坎肩宽54厘米，衣长68厘米',
       grain: '棉麻纤维',
-      estate: '二级'
+      estate: '二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -966,7 +1032,8 @@ var staticConfig = {
       sort: '皮革',
       size: '73*3.3厘米',
       grain: '皮革',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -976,7 +1043,8 @@ var staticConfig = {
       sort: '其他',
       size: '18*7.6*22.9厘米',
       grain: '皮革',
-      estate: '三级'
+      estate: '三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -986,7 +1054,8 @@ var staticConfig = {
       sort: '家具',
       size: '58*35.7*30.8厘米',
       grain: '木',
-      estate: '拟定三级'
+      estate: '拟定三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -996,7 +1065,8 @@ var staticConfig = {
       sort: '皮革',
       size: '62*40*20厘米',
       grain: '皮革、木',
-      estate: '拟定三级'
+      estate: '拟定三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -1006,7 +1076,8 @@ var staticConfig = {
       sort: '其他',
       size: '15.5*4.8厘米',
       grain: '皮革、其他金属',
-      estate: '拟定三级'
+      estate: '拟定三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -1016,7 +1087,8 @@ var staticConfig = {
       sort: '其他',
       size: '20.8*20.5*30厘米',
       grain: '木、铁',
-      estate: '拟定二级'
+      estate: '拟定二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -1026,7 +1098,8 @@ var staticConfig = {
       sort: '其他',
       size: '16*8*4.5厘米',
       grain: '其他金属,其他无机质',
-      estate: '拟定二级'
+      estate: '拟定二级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -1036,7 +1109,8 @@ var staticConfig = {
       sort: '瓷器',
       size: '17.5*13.5*12厘米',
       grain: '瓷',
-      estate: '拟定三级'
+      estate: '拟定三级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'clothing',
@@ -1046,7 +1120,8 @@ var staticConfig = {
       sort: '织绣',
       size: '48*37厘米',
       grain: '丝,棉麻纤维',
-      estate: '一级'
+      estate: '一级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'clothing',
@@ -1056,7 +1131,8 @@ var staticConfig = {
       sort: '织绣',
       size: '19.5*19厘米',
       grain: '丝,棉麻纤维',
-      estate: '一级'
+      estate: '一级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -1066,7 +1142,8 @@ var staticConfig = {
       sort: '织绣',
       size: '43.5*66.5厘米',
       grain: '丝,棉麻纤维',
-      estate: '一级'
+      estate: '一级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
     {
       type: 'tool',
@@ -1076,7 +1153,8 @@ var staticConfig = {
       sort: '织绣',
       size: '25*34厘米',
       grain: '丝,棉麻纤维',
-      estate: '一级'
+      estate: '一级',
+      desc: '文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍文物介绍',
     },
   ]
 }

src/components/BtnBack.vue

@@ -4,12 +4,17 @@
     @click="router.go(-1)"
   >
     <img
-      src="@/assets/images/icon_arrow-left-blue.png"
+      :src="require(`@/assets/images/icon_arrow-left-${props.color}.png`)"
       alt=""
       class="icon"
       draggable="false"
     >
-    <div class="text">
+    <div
+      class="text"
+      :style="{
+        color: textColor,
+      }"
+    >
       返回
     </div>
   </button>
@@ -25,6 +30,24 @@ const router = useRouter()
 const store = useStore()
 
 const $env = inject('$env')
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'blue',
+  }
+})
+
+const textColor = computed(() => {
+  if (props.color === 'blue') {
+    return '#589498'
+  } else if (props.color === 'white') {
+    return '#fff'
+  } else {
+    return ''
+  }
+})
+
 </script>
 
 <style lang="less" scoped>
@@ -42,7 +65,6 @@ const $env = inject('$env')
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
     font-size: 18px;
-    color: #589498;
   }
 }
 </style>

src/router/index.js

@@ -17,6 +17,7 @@ import ServiceView from '@/views/about/ServiceView.vue'
 import InfoView from '@/views/about/InfoView.vue'
 import InfoDetail from '@/views/about/InfoDetail.vue'
 import CollectionView from '@/views/about/CollectionView.vue'
+import CollectionDetail from '@/views/about/CollectionDetail.vue'
 
 // import store from '@/store/index.js'
 
@@ -100,6 +101,16 @@ const routes = [
         meta: {
           aboutTabIdx: 5
         },
+        children: [
+          {
+            path: 'collection-detail',
+            name: 'CollectionDetail',
+            component: CollectionDetail,
+            meta: {
+              hideTabBar: true,
+            }
+          },
+        ]
       },
     ]
   },

src/store/index.js

@@ -22,6 +22,7 @@ export default createStore({
       userId: userId ? Number(userId) : null,
     },
     pageVisitRecord: {},
+    needCollectionDetailTip: true,
   },
   getters: {
     loginStatusEnum() {
@@ -58,7 +59,10 @@ export default createStore({
     },
     setPageVisitRecord(state, value) {
       state.pageVisitRecord = value
-    }
+    },
+    setNeedCollectionDetailTip(state, value) {
+      state.needCollectionDetailTip = value
+    },
   },
   actions: {
     recordPageVisitIfNeeded({ state, commit }, { pageId }) {

src/views/about/CollectionDetail.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="collection-detail">
+    <iframe
+      :src="`https://4dscene.4dage.com/culturalrelics/NSRDYT/Model2.html?m=nsr03&timestamp=${new Date().getTime()}`"
+      allow="fullscreen"
+      frameborder="0"
+    />
+    <BtnBack
+      :color="'white'"
+    />
+    <div class="text">
+      <h1
+        class="title"
+        :title="info.name"
+      >
+        {{ info.name }}
+      </h1>
+      <div
+        class="age"
+        :title="info.age"
+      >
+        {{ info.age }}
+      </div>
+      <div
+        class="size"
+        :title="info.size"
+      >
+        {{ info.size }}
+      </div>
+      <div class="desc">
+        {{ info.desc }}
+      </div>
+    </div>
+    <Transition name="fade-out">
+      <div
+        v-show="isShowTip"
+        class="tip-wrapper"
+      >
+        <img
+          class="tip"
+          src="@/assets/images/operation-tip.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const info = computed(() => {
+  return staticConfig.collectionList.find((item) => {
+    return item.bs === route.query.id
+  })
+})
+
+const isShowTip = computed(() => {
+  return store.state.needCollectionDetailTip
+})
+
+if (store.state.needCollectionDetailTip) {
+  setTimeout(() => {
+    store.commit('setNeedCollectionDetailTip', false)
+  }, 3000)
+}
+
+</script>
+
+<style lang="less" scoped>
+.collection-detail{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  z-index: 10;
+  >iframe{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+  >.text{
+    position: absolute;
+    top: 111px;
+    right: calc(170 / 1920 * 100vw);
+    width: 279px;
+    >h1.title{
+      font-family: Source Han Serif CN, Source Han Serif CN;
+      font-weight: bold;
+      font-size: 40px;
+      color: #FFE794;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      overflow: hidden;
+    }
+    >.age{
+      margin-top: 30px;
+      overflow: hidden;
+      white-space: pre;
+      text-overflow: ellipsis;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      font-size: 18px;
+      color: #FFFFFF;
+      line-height: 22px;
+    }
+    >.size{
+      margin-top: 5px;
+      overflow: hidden;
+      white-space: pre;
+      text-overflow: ellipsis;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      font-size: 18px;
+      color: #FFFFFF;
+      line-height: 22px;
+    }
+    >.desc{
+      margin-top: 33px;
+      text-indent: 2em;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      font-size: 18px;
+      color: #FFFFFF;
+      line-height: 27px;
+      text-align: justified;
+      max-height: 450px;
+      overflow: auto;
+      padding-right: 0.5em;
+    }
+  }
+  >.tip-wrapper{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    >img.tip{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      height: 30%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+</style>

src/views/about/CollectionView.vue

@@ -1,77 +1,86 @@
 <template>
   <div class="collection-view">
-    <div class="banner-area">
-      <div class="search-wrapper">
-        <input
-          v-model.trim="keyword"
-          type="text"
-          placeholder="请输入要搜索的内容..."
-        >
-        <button class="search">
-          <img
-            class=""
-            src="@/assets/images/icon_search-big.png"
-            alt=""
-            draggable="false"
+    <div class="wrapper">
+      <div class="banner-area">
+        <div class="search-wrapper">
+          <input
+            v-model.trim="keyword"
+            type="text"
+            placeholder="请输入要搜索的内容..."
           >
-        </button>
+          <button class="search">
+            <img
+              class=""
+              src="@/assets/images/icon_search-big.png"
+              alt=""
+              draggable="false"
+            >
+          </button>
+        </div>
       </div>
-    </div>
 
-    <div class="tab-bar">
-      <button
-        v-for="item in collectionTypeList"
-        :key="item.id"
-        class="tab-item"
-        :class="{
-          active: item.id === activeTabId
-        }"
-        @click="activeTabId = item.id"
-      >
-        {{ item.cn }}
-      </button>
-    </div>
+      <div class="tab-bar">
+        <button
+          v-for="item in collectionTypeList"
+          :key="item.id"
+          class="tab-item"
+          :class="{
+            active: item.id === activeTabId
+          }"
+          @click="activeTabId = item.id"
+        >
+          {{ item.cn }}
+        </button>
+      </div>
 
-    <div
-      class="card-list"
-    >
       <div
-        v-for="item in collectionList"
-        :key="item.name"
-        class="card"
+        class="card-list"
       >
-        <img
-          class="thumb"
-          :src="`https://yuhuatai.4dage.com/YHT/goodsData/3D/${item.bs}.png`"
-          alt=""
-          draggable="false"
+        <div
+          v-for="item in collectionList"
+          :key="item.name"
+          class="card"
+          @click="onClickCollection(item.bs)"
         >
-        <div class="bottom">
-          <span class="name">
-            {{ item.name }}
-          </span>
           <img
-            class="icon"
-            src="@/assets/images/icon_arrow-right-blue.png"
+            class="thumb"
+            :src="`https://yuhuatai.4dage.com/YHT/goodsData/3D/${item.bs}.png`"
             alt=""
             draggable="false"
           >
+          <div class="bottom">
+            <span
+              class="name"
+              :title="item.name"
+            >
+              {{ item.name }}
+            </span>
+            <img
+              class="icon"
+              src="@/assets/images/icon_arrow-right-blue.png"
+              alt=""
+              draggable="false"
+            >
+          </div>
         </div>
       </div>
+      <div class="pagination-wrap">
+        <el-pagination
+          v-model:current-page="currentPage"
+          class="pagination"
+          :size="'large'"
+          :page-size="pageSize"
+          layout="prev, pager, next"
+          :total="collectionListlengh"
+          prev-text="上一页"
+          next-text="下一页"
+          :hide-on-single-page="true"
+        />
+      </div>
     </div>
-    <div class="pagination-wrap">
-      <el-pagination
-        v-model:current-page="currentPage"
-        class="pagination"
-        :size="'large'"
-        :page-size="pageSize"
-        layout="prev, pager, next"
-        :total="collectionListlengh"
-        prev-text="上一页"
-        next-text="下一页"
-        :hide-on-single-page="true"
-      />
-    </div>
+
+
+    <router-view />
   </div>
 </template>
 
@@ -104,6 +113,14 @@ const collectionList = computed(() => {
   return fetchRelicList(activeTabId.value, keyword.value, currentPage.value - 1, pageSize).list
 })
 
+function onClickCollection(id) {
+  router.push({
+    name: 'CollectionDetail',
+    query: {
+      id,
+    }
+  })
+}
 </script>
 
 <style lang="less" scoped>
@@ -114,136 +131,167 @@ const collectionList = computed(() => {
   width: 100%;
   height: 100%;
   background-color: #fff;
-  overflow: auto;
-  >.banner-area{
+  >.wrapper{
+    position: absolute;
+    left: 0;
+    top: 0;
     width: 100%;
-    height: calc(651 / 1920 * 100vw);
-    background-image: url(@/assets/images/about/banner-collection.jpg);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-    position: relative;
-    >.search-wrapper{
-      position: absolute;
-      left: 50%;
-      bottom: 24px;
-      transform: translateX(-50%);
-      width: 790px;
-      height: 70px;
-      background: rgba(255,255,255,0.7);
-      box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.25);
-      border-radius: 35px;
-      border: 2px solid #589498;
+    height: 100%;
+    overflow: auto;
+    >.banner-area{
+      width: 100%;
+      height: calc(651 / 1920 * 100vw);
+      background-image: url(@/assets/images/about/banner-collection.jpg);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      position: relative;
+      >.search-wrapper{
+        position: absolute;
+        left: 50%;
+        bottom: 24px;
+        transform: translateX(-50%);
+        width: 790px;
+        height: 70px;
+        background: rgba(255,255,255,0.7);
+        box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.25);
+        border-radius: 35px;
+        border: 2px solid #589498;
+        display: flex;
+        align-items: center;
+        padding-left: 33px;
+        padding-right: 29px;
+        >input{
+          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-weight: 400;
+          font-size: 24px;
+          color: #474747;
+          width: 680px;
+        }
+        input::placeholder {
+          color: #FFFFFF;
+        }
+        >button.search{
+          pointer-events: none;
+          width: 40px;
+          height: 40px;
+          padding: 5px;
+          >img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+
+    >.tab-bar{
+      height: 138px;
       display: flex;
+      justify-content: center;
       align-items: center;
-      padding-left: 33px;
-      padding-right: 29px;
-      >input{
+      text-align: center;
+      gap: calc(184 / 1920 * 100vw);
+      >.tab-item {
         font-family: Source Han Sans CN, Source Han Sans CN;
         font-weight: 400;
         font-size: 24px;
         color: #474747;
-        width: 680px;
+        height: 38px;
       }
-      input::placeholder {
-        color: #FFFFFF;
-      }
-      >button.search{
-        pointer-events: none;
-        width: 40px;
-        height: 40px;
-        padding: 5px;
-        >img{
+      >.tab-item.active{
+        font-weight: bold;
+        position: relative;
+        z-index: 0;
+        &::after{
+          content: '';
+          display: block;
+          position: absolute;
+          height: 14px;
           width: 100%;
-          height: 100%;
+          background: #FFE794;
+          bottom: 0;
+          z-index: -1;
         }
       }
     }
-  }
-
-  >.tab-bar{
-    height: 138px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    gap: calc(184 / 1920 * 100vw);
-    >.tab-item {
-      font-family: Source Han Sans CN, Source Han Sans CN;
-      font-weight: 400;
-      font-size: 24px;
-      color: #474747;
-      height: 38px;
-    }
-    >.tab-item.active{
-      font-weight: bold;
-      position: relative;
-      z-index: 0;
-      &::after{
-        content: '';
-        display: block;
-        position: absolute;
-        height: 14px;
-        width: 100%;
-        background: #FFE794;
-        bottom: 0;
-        z-index: -1;
-      }
-    }
-  }
-  >.card-list{
-    height: calc(457px * 2 + 58px * 2);
-    width: calc(355px * 4 + 36px * 4);
-    margin-left: auto;
-    margin-right: auto;
-    transform: translate(calc(36px / 2), 0);
-    >.card{
-      display: inline-block;
-      width: 355px;
-      height: 457px;
-      background: #FFFFFF;
-      box-shadow: 0px 4px 62px 0px rgba(81,112,114,0.25);
-      border-radius: 9px 9px 9px 9px;
-      margin-right: 36px;
-      margin-bottom: 58px;
-      >img.thumb{
-        width: 100%;
-        height: 355px;
-        object-fit: cover;
-      }
-    }
-  }
-  >.pagination-wrap{
-    display: flex;
-    justify-content: center;
-    padding-bottom: 52px;
-    >.pagination{
-      ::v-deep{
-        button.btn-prev, button.btn-next{
-          width: 126px;
-          height: 45px;
-          border-radius: 23px;
-          border: 1px solid #474747;
-          margin-left: 20px;
-          margin-right: 20px;
-          >span{
-            font-family: Source Han Sans CN, Source Han Sans CN;
-            font-weight: 400;
-            font-size: 20px;
+    >.card-list{
+      height: calc(457px * 2 + 58px * 2);
+      width: calc(355px * 4 + 36px * 4);
+      margin-left: auto;
+      margin-right: auto;
+      transform: translate(calc(36px / 2), 0);
+      >.card{
+        display: inline-block;
+        width: 355px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 62px 0px rgba(81,112,114,0.25);
+        border-radius: 9px 9px 9px 9px;
+        margin-right: 36px;
+        margin-bottom: 58px;
+        cursor: pointer;
+        >img.thumb{
+          width: 100%;
+          height: 355px;
+          object-fit: cover;
+        }
+        >.bottom{
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding-left: 42px;
+          padding-right: 35px;
+          >.name{
+            font-family: Source Han Serif CN, Source Han Serif CN;
+            font-weight: bold;
+            font-size: 21px;
             color: #474747;
+            width: 240px;
+            overflow: hidden;
+            white-space: pre;
+            text-overflow: ellipsis;
+          }
+          >img.icon{
+            height: 39px;
           }
         }
-        ul.el-pager{
-          >li.number{
-            font-family: Source Han Sans CN, Source Han Sans CN;
-            font-weight: 400;
-            font-size: 20px;
-            color: #474747;
+      }
+      >.card:hover{
+
+      }
+    }
+    >.pagination-wrap{
+      display: flex;
+      justify-content: center;
+      padding-bottom: 52px;
+      >.pagination{
+        ::v-deep{
+          button.btn-prev, button.btn-next{
+            width: 126px;
+            height: 45px;
+            border-radius: 23px;
+            border: 1px solid #474747;
+            margin-left: 20px;
+            margin-right: 20px;
+            >span{
+              font-family: Source Han Sans CN, Source Han Sans CN;
+              font-weight: 400;
+              font-size: 20px;
+              color: #474747;
+            }
           }
-          >li.number.is-active{
-            color: #47392C;
-            background: #FFE794;
-            border-radius: 50%;
+          ul.el-pager{
+            >li.number{
+              font-family: Source Han Sans CN, Source Han Sans CN;
+              font-weight: 400;
+              font-size: 20px;
+              color: #474747;
+            }
+            >li.number.is-active{
+              color: #47392C;
+              background: #FFE794;
+              border-radius: 50%;
+            }
           }
         }
       }