feat: 典藏页做了一半。

public/staticConfig.js

@@ -228,6 +228,7 @@ var staticConfig = {
       html: ``,
     },
   ],
+  // ### 通知
   notificationList: [
     {
       id: 0,
@@ -272,4 +273,810 @@ var staticConfig = {
       isNew: false,
     },
   ],
+
+  // ## 典藏 （从雨花台搬来的，用于demo）
+  collectionTypeList: [
+    {
+      id: 'straw',
+      cn: '手稿',
+    },
+    {
+      id: 'book',
+      cn: '书刊',
+    },
+    {
+      id: 'tool',
+      cn: '用具',
+    },
+    {
+      id: 'clothing',
+      cn: '服装',
+    },
+    {
+      id: 'Italy',
+      cn: '油画',
+    },
+  ],
+  collectionList: [
+    {
+      type: 'tool',
+      bs: 'yht01',
+      name: '中华民国时期赵良璋烈士用过的派克51型钢笔',
+      age: '中华民国时期(1912~1949)',
+      sort: '文具',
+      size: '13*1.3厘米',
+      grain: '钢，其他金属，其他无机质',
+      estate: '二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht02',
+      name: '1947年赵良璋烈士在北平刻的"野雪"水晶印',
+      age: '中华民国时期(1912~1949)',
+      sort: '文件、宣传品',
+      size: '5*1.2*1.2厘米',
+      grain: '其他金属',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht03',
+      name: '中华民国时期丁行烈士用过的水晶印',
+      age: '中华民国时期(1912~1949)',
+      sort: '文件、宣传品',
+      size: '7*1.5*1.5厘米',
+      grain: '其他无机质、其他金属',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht04',
+      name: '中华民国时期邓振询烈士的私章',
+      age: '中华民国时期(1912~1949)',
+      sort: '文件、宣传品',
+      size: '印章2.3*1.1*1.1',
+      grain: '其他无机质、木',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht05',
+      name: '中华民国时期文绍珍烈士的国民革命军军官学校第六期学生毕业证章',
+      age: '中华民国时期(1912~1949)',
+      sort: '文件、宣传品',
+      size: '3.2*2.6厘米',
+      grain: '铜',
+      estate: '二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht06',
+      name: '1943年丁行烈士在狱中刻的“蒲洛宇”石印',
+      age: '中华民国时期(1912~1949)',
+      sort: '文件、宣传品',
+      size: '4.5*1.6*1.6厘米',
+      grain: '石',
+      estate: '二级'
+    },
+    {
+      type: 'book',
+      bs: 'yht08',
+      name: '中华民国时期成贻宾烈士的国立中央大学校徽',
+      age: '中华民国时期(1912~1949)',
+      sort: '文件、宣传品',
+      size: '等边三角形，边长 4 厘米，直径3.4厘米',
+      grain: '铜',
+      estate: '二级'
+    },
+    {
+      type: 'book',
+      bs: 'yht09',
+      name: '中华民国时期谭寿林烈士木刻“祝封贵县”私章',
+      age: '中华民国时期(1912~1949)',
+      sort: '文件、宣传品',
+      size: '梯形立方体，上边长1.5厘米,下边长2厘米，高2.7厘米',
+      grain: '木',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht10',
+      name: '中华民国时期周镐烈士用过的红玛瑙私印',
+      age: '中华民国时期(1912~1949)',
+      sort: '文件、宣传品',
+      size: '印章4*1.5*1.5 印章盒长7.5厘米，宽2.5厘米，高3厘米',
+      grain: '宝玉石',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht11',
+      name: '中华民国时期谢文锦烈士用过的私印',
+      age: '中华民国时期(1912~1949)',
+      sort: '文件、宣传品',
+      size: '3*3*3.5厘米',
+      grain: '石',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht12',
+      name: '1924年张应春烈士参加第三次全国运动会获得的银质奖章',
+      age: '中华民国时期(1912~1949)',
+      sort: '文件、宣传品',
+      size: '直径3.8厘米',
+      grain: '银',
+      estate: '二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht13',
+      name: '中华民国时期何宝珍烈士使用过的瓷盘',
+      age: '中华民国时期(1912~1949)',
+      sort: '瓷器',
+      size: '直径20.3厘米',
+      grain: '瓷',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht14',
+      name: '中华民国时期何宝珍烈士使用过的搪瓷盘',
+      age: '中华民国时期(1912~1949)',
+      sort: '瓷器',
+      size: '直径20.3厘米',
+      grain: '其他无机质',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht15',
+      name: '20世纪20年代高文华烈士北伐时期用过的搪瓷杯',
+      age: '中华民国时期(1912~1949)',
+      sort: '瓷器',
+      size: '直径10.8厘米，高10厘米',
+      grain: '其他无机质',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht16',
+      name: '中华民国时期谢文锦烈士用过的金边瓷碗',
+      age: '中华民国时期(1912~1949)',
+      sort: '瓷器',
+      size: '口径12厘米，底径6厘米，碗高5.1厘米',
+      grain: '瓷',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht17',
+      name: '中华民国时期杜焕卿烈士用过的漱口杯',
+      age: '中华民国时期(1912~1949)',
+      sort: '瓷器',
+      size: '直径8.8厘米，高10厘米',
+      grain: '瓷',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht18',
+      name: '中华民国时期谢士炎烈士用过的铁皮箱',
+      age: '中华民国时期(1912~1949)',
+      sort: '家具',
+      size: '81.5*47.7*19.7厘米',
+      grain: '铁、皮革',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht19',
+      name: '中华民国时期谭寿林烈士用过的书箱',
+      age: '中华民国时期(1912~1949)',
+      sort: '家具',
+      size: '63.5*30.7*38.5厘米',
+      grain: '木',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht20',
+      name: '中华民国时期朱杏南烈士工作时用过的陶瓷花盆和木花几',
+      age: '中华民国时期(1912~1949)',
+      sort: '家具',
+      size: '花盆口径27厘米，底径12厘米高16厘米 花几高73厘米',
+      grain: '瓷，木',
+      estate: '二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht21',
+      name: '中华民国时期孔繁蕤烈士用过的皮箱',
+      age: '中华民国时期(1912~1949)',
+      sort: '皮革',
+      size: '79.5*47.3*19.5厘米',
+      grain: '皮革',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht22-1',
+      name: '中华民国时期焦恭士烈士用过的皮箱',
+      age: '中华民国时期(1912~1949)',
+      sort: '皮革',
+      size: '29.5*17.6*8.5厘米',
+      grain: '皮革',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht22-2',
+      name: '中华民国时期焦恭士烈士用过的皮箱（打开）',
+      age: '中华民国时期(1912~1949)',
+      sort: '皮革',
+      size: '29.5*17.6*8.5厘米',
+      grain: '皮革',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht23',
+      name: '中华民国时期何宝珍烈士用过的皮箱',
+      age: '中华民国时期(1912~1949)',
+      sort: '皮革',
+      size: '65.4*38.5*19.6厘米',
+      grain: '皮革',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht24',
+      name: '中华民国时期周镐烈士用过的皮包',
+      age: '中华民国时期(1912~1949)',
+      sort: '皮革',
+      size: '28*39*3厘米',
+      grain: '皮革',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht25',
+      name: '中华民国时期文绍珍烈士用过的黄皮文件包',
+      age: '中华民国时期(1912~1949)',
+      sort: '皮革',
+      size: '33*26*2厘米',
+      grain: '皮革',
+      estate: '二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht26-1',
+      name: '中华民国时期赵良璋烈士用过的飞行员护目眼镜盒（闭合）',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '22*8.4*5.2厘米',
+      grain: '其他金属',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht26-2',
+      name: '中华民国时期赵良璋烈士用过的飞行员护目眼镜盒（打开）',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '22*8.4*5.2厘米',
+      grain: '其他金属',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht27',
+      name: '中华民国时期郭纲琳烈士戴过的瑞士方形女表',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '表盘1.5*1厘米',
+      grain: '其他金属',
+      estate: '二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht28',
+      name: '中华民国时期吕惠生烈士用过的手电筒',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '18.7*4.1厘米',
+      grain: '其他金属',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht29',
+      name: '中华民国时期夏雨初烈士用过的铜锁',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '7.5*1.5*3.3厘米',
+      grain: '铜',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht30',
+      name: '1930年夏雨初烈士就义时戴的眼镜',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '11.8*5.2厘米',
+      grain: '玻璃,其他无机质',
+      estate: '二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht31',
+      name: '中华民国时期夏雨初烈士用过的油灯',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '14*10.5厘米',
+      grain: '铜',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht32',
+      name: '1947年卢志英烈士在上海工作时使用的怀表',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '直径4厘米，表链长 20厘米',
+      grain: '铜，其他金属',
+      estate: '一级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht33',
+      name: '20世纪30年代郭纲琳烈士在狱中用铜元磨制的刻字“永是勇士”鸡心形铜片',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '2.5*1.5厘米',
+      grain: '铜',
+      estate: '一级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht34',
+      name: '中华民国时期文绍珍烈士用过的闹钟',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '直径12厘米',
+      grain: '铜，其他金属',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht35',
+      name: '20世纪30年代郭纲琳烈士狱中磨过的铜元',
+      age: '中华民国时期(1912~1949)',
+      sort: '钱币',
+      size: '直径2.8厘米',
+      grain: '铜',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht36',
+      name: '中华民国时期文绍珍烈士用过的剪刀',
+      age: '中华民国时期(1912~1949)',
+      sort: '铁器、其他金属器',
+      size: '23*9.6厘米',
+      grain: '铁',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht37',
+      name: '中华民国时期谢士炎烈士用过的铜镇纸',
+      age: '中华民国时期(1912~1949)',
+      sort: '铜器',
+      size: '25*3*0.8厘米',
+      grain: '铜',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht38',
+      name: '中华民国时期胡廷俊烈士自制的砚台',
+      age: '中华民国时期(1912~1949)',
+      sort: '文具',
+      size: '10.5*9.8*2.2厘米',
+      grain: '石',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht39',
+      name: '中华民国时期夏雨初烈士用过的眼镜盒',
+      age: '中华民国时期(1912~1949)',
+      sort: '文具',
+      size: '13.5*5.7厘米',
+      grain: '铁',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht40',
+      name: '1943年丁行烈士在狱中磨制的石笔架',
+      age: '中华民国时期(1912~1949)',
+      sort: '文具',
+      size: '7*2*2厘米',
+      grain: '石',
+      estate: '二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht41',
+      name: '中华民国时期谢士炎烈士用过的墨盒',
+      age: '中华民国时期(1912~1949)',
+      sort: '文具',
+      size: '10.8*10.8*3.8厘米',
+      grain: '铜',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht42',
+      name: '中华民国时期杜焕卿烈士用过的墨盒',
+      age: '中华民国时期(1912~1949)',
+      sort: '文具',
+      size: '直径10厘米，高2厘米',
+      grain: '石',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht43',
+      name: '中华民国时期蒋传宗烈士用过的钢笔',
+      age: '中华民国时期(1912~1949)',
+      sort: '文具',
+      size: '13*1.3厘米',
+      grain: '其他无机质',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht44',
+      name: '1927年夏雨初烈士在郎溪组织农民起义时用过的梭镖',
+      age: '中华民国时期(1912~1949)',
+      sort: '武器',
+      size: '30*4.7厘米',
+      grain: '铁',
+      estate: '二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht45',
+      name: '1943年吕惠生烈士用过的大刀',
+      age: '中华民国时期(1912~1949)',
+      sort: '武器',
+      size: '68.6*6.6厘米',
+      grain: '其他金属',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht47',
+      name: '中华民国时期国民党宪兵司令部奠基纪念碑',
+      age: '中华民国时期(1912~1949)',
+      sort: '玺印符牌',
+      size: '93*51*10厘米',
+      grain: '石',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht48',
+      name: '1928年冯玉祥送给谢庆云烈士的象牙筷',
+      age: '中华民国时期(1912~1949)',
+      sort: '牙骨角器',
+      size: '直径0.3厘米，长22厘米',
+      grain: '骨角牙',
+      estate: '二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht49',
+      name: '中华民国时期蒋宗銮烈士所制“和平忠厚”竹臂搁',
+      age: '中华民国时期(1912~1949)',
+      sort: '竹木雕',
+      size: '21*6厘米',
+      grain: '木',
+      estate: '三级'
+    },
+    {
+      type: 'clothing',
+      bs: 'yht50',
+      name: '中华民国时期赵良璋烈士穿过的皮夹克',
+      age: '中华民国时期(1912~1949)',
+      sort: '皮革',
+      size: '肩宽 47 厘米，衣长 60 厘米',
+      grain: '皮革，棉麻纤维',
+      estate: '一级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht51',
+      name: '中华民国时期晋夫烈士用过的皮包',
+      age: '中华民国时期(1912~1949)',
+      sort: '皮革',
+      size: '26*18*7厘米',
+      grain: '皮革',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht52',
+      name: '中华民国时期焦恭士烈士的银盾',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '主体最长 16 厘米，最宽 12 厘米；底座最长 21 厘米，最宽 16 厘米',
+      grain: '铜，银、木',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht53',
+      name: '20世纪30年代郭纲琳烈士在狱中用铜元磨制的刻字“健美”桃心形铜片',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '2.2*2厘米',
+      grain: '铜',
+      estate: '一级'
+    },
+    {
+      type: 'clothing',
+      bs: 'yht54',
+      name: '1947年卢志英烈士在上海被捕时特务撕毁的上衣',
+      age: '中华民国时期(1912~1949)',
+      sort: '织绣',
+      size: '肩宽 48 厘米，衣长 67 厘米',
+      grain: '毛,棉麻纤维',
+      estate: '一级'
+    },
+    {
+      type: 'clothing',
+      bs: 'yht55',
+      name: '中华民国时期邓中夏烈士穿过的紫色绸质背坎',
+      age: '中华民国时期(1912~1949)',
+      sort: '织绣',
+      size: '肩宽50厘米，衣长66厘米',
+      grain: '丝',
+      estate: '二级'
+    },
+    {
+      type: 'clothing',
+      bs: 'yht57',
+      name: '1949年成贻宾烈士牺牲时穿的青呢中山装',
+      age: '中华民国时期(1912~1949)',
+      sort: '织绣',
+      size: '肩宽55厘米，衣长85厘米',
+      grain: '毛、棉麻纤维',
+      estate: '二级'
+    },
+    {
+      type: 'clothing',
+      bs: 'yht58',
+      name: '中华民国时期何宝珍烈士穿过的棉质衬衣',
+      age: '中华民国时期(1912~1949)',
+      sort: '织绣',
+      size: '衣长60厘米，肩宽44厘米，袖长31厘米',
+      grain: '棉麻纤维',
+      estate: '二级'
+    },
+    {
+      type: 'clothing',
+      bs: 'yht59',
+      name: '20世纪20年代徐全直烈士在武汉工作期间穿过的毛巾浴袍',
+      age: '中华民国时期(1912~1949)',
+      sort: '织绣',
+      size: '衣长125厘米，肩宽45厘米',
+      grain: '毛,棉麻纤维',
+      estate: '二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht60',
+      name: '1929年吉鸿昌送给谢庆云烈士的地毯',
+      age: '中华民国时期(1912~1949)',
+      sort: '织绣',
+      size: '180*130厘米',
+      grain: '毛，棉麻纤维',
+      estate: '二级'
+    },
+    {
+      type: 'clothing',
+      bs: 'yht61',
+      name: '1934年卢志英烈士在贵州工作时获赠的毛毯',
+      age: '中华民国时期(1912~1949)',
+      sort: '织绣',
+      size: '150*100厘米',
+      grain: '毛，棉麻纤维',
+      estate: '二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht63',
+      name: '1933年郭纲琳烈士工作时期戴过的帽子',
+      age: '中华民国时期(1912~1949)',
+      sort: '织绣',
+      size: '直径22厘米',
+      grain: '毛、棉麻纤维',
+      estate: '三级'
+    },
+    {
+      type: 'clothing',
+      bs: 'yht64',
+      name: '中华民国时期孔繁蕤烈士穿过的军装',
+      age: '中华民国时期(1912~1949)',
+      sort: '织绣',
+      size: '肩宽47厘米，衣长72厘米，裤长103厘米',
+      grain: '棉麻纤维',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht65',
+      name: '中华民国时期杨斌烈士用过的床单',
+      age: '中华民国时期(1912~1949)',
+      sort: '织绣',
+      size: '150*80厘米',
+      grain: '棉麻纤维',
+      estate: '二级'
+    },
+    {
+      type: 'clothing',
+      bs: 'yht67-1',
+      name: '中华民国时期陈祝三烈士穿过的黄皮鞋',
+      age: '中华民国时期(1912~1949)',
+      sort: '皮革',
+      size: '皮鞋长28厘米',
+      grain: '皮革',
+      estate: '二级'
+    },
+    {
+      type: 'clothing',
+      bs: 'yht67-2',
+      name: '中华民国时期陈祝三烈士穿过的大衣',
+      age: '中华民国时期(1912~1949)',
+      sort: '皮革',
+      size: '大衣肩宽57厘米，衣长86厘米',
+      grain: '棉麻纤维',
+      estate: '二级'
+    },
+    {
+      type: 'clothing',
+      bs: 'yht67-3',
+      name: '中华民国时期陈祝三烈士穿过的背坎',
+      age: '中华民国时期(1912~1949)',
+      sort: '皮革',
+      size: '背坎肩宽54厘米，衣长68厘米',
+      grain: '棉麻纤维',
+      estate: '二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht68',
+      name: '20世纪20年代文绍珍烈士北伐时期用过的皮带',
+      age: '中华民国时期(1912~1949)',
+      sort: '皮革',
+      size: '73*3.3厘米',
+      grain: '皮革',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht69',
+      name: '中华民国时期邓振询烈士用过的公文包',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '18*7.6*22.9厘米',
+      grain: '皮革',
+      estate: '三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht70',
+      name: '中华民国时期贺瑞麟烈士用过的木箱',
+      age: '中华民国时期(1912~1949)',
+      sort: '家具',
+      size: '58*35.7*30.8厘米',
+      grain: '木',
+      estate: '拟定三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht71',
+      name: '中华民国时期姚爱兰烈士用过的皮箱',
+      age: '中华民国时期(1912~1949)',
+      sort: '皮革',
+      size: '62*40*20厘米',
+      grain: '皮革、木',
+      estate: '拟定三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht72',
+      name: '中华民国时期丁行烈士用过的望远镜',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '15.5*4.8厘米',
+      grain: '皮革、其他金属',
+      estate: '拟定三级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht73',
+      name: '中华民国时期邓中夏烈士读书时用过的手炉',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '20.8*20.5*30厘米',
+      grain: '木、铁',
+      estate: '拟定二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht74',
+      name: '中华民国时期丁行烈士用过的相机',
+      age: '中华民国时期(1912~1949)',
+      sort: '其他',
+      size: '16*8*4.5厘米',
+      grain: '其他金属,其他无机质',
+      estate: '拟定二级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht75',
+      name: '中华民国时期卢志英烈士用过的瓷盖罐',
+      age: '中华民国时期(1912~1949)',
+      sort: '瓷器',
+      size: '17.5*13.5*12厘米',
+      grain: '瓷',
+      estate: '拟定三级'
+    },
+    {
+      type: 'clothing',
+      bs: 'yht77',
+      name: '1935年郭纲琳烈士在狱中刺绣“get up”手帕',
+      age: '中华民国时期(1912~1949)',
+      sort: '织绣',
+      size: '48*37厘米',
+      grain: '丝,棉麻纤维',
+      estate: '一级'
+    },
+    {
+      type: 'clothing',
+      bs: 'yht76',
+      name: '20世纪30年代郭纲琳烈士在狱中刺绣“long live”五角星手帕',
+      age: '中华民国时期(1912~1949)',
+      sort: '织绣',
+      size: '19.5*19厘米',
+      grain: '丝,棉麻纤维',
+      estate: '一级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht79',
+      name: '1935年郭纲琳烈士在狱中刺绣“to struggle for truth”小猫枕套',
+      age: '中华民国时期(1912~1949)',
+      sort: '织绣',
+      size: '43.5*66.5厘米',
+      grain: '丝,棉麻纤维',
+      estate: '一级'
+    },
+    {
+      type: 'tool',
+      bs: 'yht78',
+      name: '1935年郭纲琳烈士在狱中刺绣“起来”大雁枕套',
+      age: '中华民国时期(1912~1949)',
+      sort: '织绣',
+      size: '25*34厘米',
+      grain: '丝,棉麻纤维',
+      estate: '一级'
+    },
+  ]
 }

src/api.js

@@ -247,4 +247,18 @@ export function uploadFile(fileData) {
   }).then((res) => {
     return res.data.data.filePath
   })
+}
+
+// type：从雨花台项目搬来的类型，用于demo。
+// type: straw(手稿)   book(书刊)   tool（用具）  clothing（服装） Italy(油画)
+export function fetchRelicList(type = 'all', keyword = '', pageNum = 0, pageSize = 20) {
+  const filtered = staticConfig.collectionList.filter((item) => {
+    return item.type === type || type === 'all'
+  }).filter((item) => {
+    return item.name.includes(keyword) || keyword === ''
+  })
+  return {
+    list: filtered.slice(pageNum * pageSize, pageNum * pageSize + pageSize),
+    total: filtered.length
+  }
 }

src/views/about/AboutView.vue

@@ -54,7 +54,7 @@
       >
         资讯
       </button>
-      <!-- <button
+      <button
         :class="{
           active: $route.meta.aboutTabIdx === 5
         }"
@@ -63,7 +63,7 @@
         })"
       >
         典藏
-      </button> -->
+      </button>
     </menu>
 
     <router-view />

src/views/about/CollectionView.vue

@@ -1,71 +1,77 @@
 <template>
-  <div class="about-view">
-    <menu
-      class="tab-bar"
-    >
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 0
-        }"
-        @click="$router.push({
-          name: 'InstitutionView'
-        })"
-      >
-        机构
-      </button>
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 1
-        }"
-        @click="$router.push({
-          name: 'VisitView'
-        })"
-      >
-        参观
-      </button>
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 2
-        }"
-        @click="$router.push({
-          name: 'ExhibitionView'
-        })"
-      >
-        展览
-      </button>
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 3
-        }"
-        @click="$router.push({
-          name: 'ServiceView'
-        })"
-      >
-        服务
-      </button>
-      <button
-        :class="{
-          active: $route.meta.aboutTabIdx === 4
-        }"
-        @click="$router.push({
-          name: 'ConsultView'
-        })"
-      >
-        资讯
-      </button>
+  <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"
+          >
+        </button>
+      </div>
+    </div>
+
+    <div class="tab-bar">
       <button
+        v-for="item in collectionTypeList"
+        :key="item.id"
+        class="tab-item"
         :class="{
-          active: $route.meta.aboutTabIdx === 5
+          active: item.id === activeTabId
         }"
-        @click="$router.push({
-          name: 'CollectionView'
-        })"
+        @click="activeTabId = item.id"
       >
-        典藏
+        {{ item.cn }}
       </button>
-    </menu>
+    </div>
 
-    <router-view />
+    <div
+      class="card-list"
+    >
+      <div
+        v-for="item in collectionList"
+        :key="item.name"
+        class="card"
+      >
+        <img
+          class="thumb"
+          :src="`https://yuhuatai.4dage.com/YHT/goodsData/3D/${item.bs}.png`"
+          alt=""
+          draggable="false"
+        >
+        <div class="bottom">
+          <span class="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>
 </template>
 
@@ -73,20 +79,175 @@
 import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
+import { fetchRelicList } from "@/api.js"
 
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
 const $env = inject('$env')
+
+const keyword = ref('')
+
+const collectionTypeList = ref([{
+  id: 'all',
+  cn: '全部',
+}, ...staticConfig.collectionTypeList])
+const activeTabId = ref('all')
+
+const currentPage = ref(1)
+const pageSize = 8
+const collectionListlengh = computed(() => {
+  return fetchRelicList(activeTabId.value, keyword.value, currentPage.value - 1, pageSize).total
+})
+const collectionList = computed(() => {
+  return fetchRelicList(activeTabId.value, keyword.value, currentPage.value - 1, pageSize).list
+})
+
 </script>
 
 <style lang="less" scoped>
-.about-view{
+.collection-view{
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
+  background-color: #fff;
+  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;
+    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;
+            color: #474747;
+          }
+        }
+        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%;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/views/about/ExhibitionView.vue

@@ -232,6 +232,7 @@ function onClickSceneItem(item) {
       height: 138px;
       display: flex;
       justify-content: center;
+      align-items: center;
       text-align: center;
       gap: calc(184 / 1920 * 100vw);
       >.tab-item {
@@ -239,9 +240,22 @@ function onClickSceneItem(item) {
         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;
+        }
       }
     }
     >.list-wrap {