瀏覽代碼

refactor: 多页模式

chenlei 1 年之前
父節點
當前提交
e5813f1189
共有 96 個文件被更改,包括 190 次插入108 次删除
  1. 2 2
      index.html
  2. 18 0
      book-fair/main.ts
  3. 17 0
      monument/index.html
  4. 3 3
      src/main.ts
  5. 46 46
      public/bookFairData.json
  6. 0 0
      public/book-fair/zhouji/12.png
  7. 0 0
      public/book-fair/zhouji/13.png
  8. 0 0
      public/book-fair/zhouji/15.png
  9. 0 0
      public/book-fair/zhouji/16.png
  10. 0 0
      public/book-fair/zhouji/19.png
  11. 0 0
      public/book-fair/zhouji/20.png
  12. 0 0
      public/book-fair/zhouji/21.png
  13. 0 0
      public/book-fair/zhouji/23.png
  14. 0 0
      public/book-fair/zhouji/25.png
  15. 0 0
      public/book-fair/zhouji/26.png
  16. 0 0
      public/book-fair/zhouji/30.png
  17. 0 0
      public/book-fair/zhouji/31.png
  18. 0 0
      public/book-fair/zhouji/33.png
  19. 0 0
      public/book-fair/zhouji/35.png
  20. 0 0
      public/book-fair/zhouji/36.png
  21. 0 0
      public/book-fair/zhouji/38.png
  22. 0 0
      public/book-fair/zhouji/40.png
  23. 0 0
      public/book-fair/zhouji/41.png
  24. 0 0
      public/book-fair/zhouji/43.png
  25. 0 0
      public/book-fair/zhouji/46.png
  26. 0 0
      public/book-fair/zhouji/47.png
  27. 0 0
      public/monument/beituo/01@2x-min.png
  28. 0 0
      public/monument/beituo/02@2x-min.png
  29. 0 0
      public/monument/beituo/03@2x-min.png
  30. 0 0
      public/monument/beituo/04@2x-min.png
  31. 0 0
      public/monument/beituo/1/0-1.png
  32. 0 0
      public/monument/beituo/1/0.png
  33. 0 0
      public/monument/beituo/1/1.png
  34. 0 0
      public/monument/beituo/1/10.png
  35. 0 0
      public/monument/beituo/1/2.png
  36. 0 0
      public/monument/beituo/1/3.png
  37. 0 0
      public/monument/beituo/1/4-2.png
  38. 0 0
      public/monument/beituo/1/4.png
  39. 0 0
      public/monument/beituo/1/5.png
  40. 0 0
      public/monument/beituo/1/6.png
  41. 0 0
      public/monument/beituo/1/7.png
  42. 0 0
      public/monument/beituo/1/8.png
  43. 0 0
      public/monument/beituo/1/9.png
  44. 0 0
      public/monument/beituo/2/1.png
  45. 0 0
      public/monument/beituo/2/2.png
  46. 0 0
      public/monument/beituo/2/3.png
  47. 0 0
      public/monument/beituo/2/4.png
  48. 0 0
      public/monument/beituo/2/5.png
  49. 0 0
      public/monument/beituo/2/6.png
  50. 0 0
      public/monument/beituo/2/7-2.png
  51. 0 0
      public/monument/beituo/2/7-3.png
  52. 0 0
      public/monument/beituo/2/7-4.png
  53. 0 0
      public/monument/beituo/2/7-5.png
  54. 0 0
      public/monument/beituo/2/7-6.png
  55. 0 0
      public/monument/beituo/2/7.png
  56. 0 0
      public/monument/beituo/2/8.png
  57. 0 0
      public/monument/beituo/2/9.png
  58. 0 0
      public/monument/beituo/3/1.png
  59. 0 0
      public/monument/beituo/3/10.png
  60. 0 0
      public/monument/beituo/3/2.png
  61. 0 0
      public/monument/beituo/3/3.png
  62. 0 0
      public/monument/beituo/3/4.png
  63. 0 0
      public/monument/beituo/3/5.png
  64. 0 0
      public/monument/beituo/3/6.png
  65. 0 0
      public/monument/beituo/3/7.png
  66. 0 0
      public/monument/beituo/3/8.png
  67. 0 0
      public/monument/beituo/3/9.png
  68. 0 0
      public/monument/beituo/4/1.png
  69. 0 0
      public/monument/beituo/4/2.png
  70. 0 0
      public/monument/beituo/4/3.png
  71. 0 0
      public/monument/beituo/4/4.png
  72. 0 0
      public/monument/beituo/4/5-1.png
  73. 0 0
      public/monument/beituo/4/5.png
  74. 0 0
      public/monument/beituo/4/6-1.png
  75. 0 0
      public/monument/beituo/4/6.png
  76. 0 0
      public/monument/beituo/4/7-1.png
  77. 0 0
      public/monument/beituo/4/7.png
  78. 0 0
      public/monument/beituo/4/8.png
  79. 0 0
      public/monument/beituo/icon_frame_blue@2x.png
  80. 0 0
      public/monument/beituo/icon_frame_blue_r@2x.png
  81. 0 0
      public/monument/beituo/icon_frame_golden@2x.png
  82. 0 0
      public/monument/beituo/icon_frame_golden_r@2x.png
  83. 0 0
      public/monument/beituo/icon_frame_white@2x.png
  84. 0 0
      public/monument/beituo/icon_frame_white_r@2x.png
  85. 0 0
      public/monument/monumentData.json
  86. 4 11
      src/App.vue
  87. 51 0
      src/monument.vue
  88. 2 20
      src/router/index.ts
  89. 27 0
      src/router/monument.ts
  90. 0 11
      src/stores/index.ts
  91. 3 3
      src/views/BookFair/index.vue
  92. 2 2
      src/views/BookFairDetail/index.vue
  93. 3 7
      src/views/Monument/index.vue
  94. 2 2
      src/views/MonumentDetail/index.vue
  95. 1 1
      tsconfig.app.json
  96. 9 0
      vite.config.ts

+ 2 - 2
index.html

@@ -8,10 +8,10 @@
       name="viewport"
       content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
     />
-    <title>扬州中国大运河博物馆</title>
+    <title>舟楫小书展</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/book-fair/main.ts"></script>
   </body>
 </html>

+ 18 - 0
book-fair/main.ts

@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { Lazyload } from 'vant'
+
+import BookFairApp from '../src/book-fair.vue'
+import router from '../src/router/book-fair'
+
+import 'lib-flexible'
+
+const app = createApp(BookFairApp)
+
+app.use(createPinia())
+app.use(router)
+app.use(Lazyload, {
+  lazyComponent: true
+})
+
+app.mount('#app')

+ 17 - 0
monument/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
+    />
+    <title>运河沿线碑拓展</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/monument/main.ts"></script>
+  </body>
+</html>

+ 3 - 3
src/main.ts

@@ -2,12 +2,12 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { Lazyload } from 'vant'
 
-import App from './App.vue'
-import router from './router'
+import MonumentApp from '../src/monument.vue'
+import router from '../src/router/monument'
 
 import 'lib-flexible'
 
-const app = createApp(App)
+const app = createApp(MonumentApp)
 
 app.use(createPinia())
 app.use(router)

+ 46 - 46
public/bookFairData.json

@@ -12,133 +12,133 @@
         "list": [
           {
             "id": 1,
-            "imgs": [""],
-            "title": "/zhouji/1.png",
+            "imgs": ["./zhouji/1.png"],
+            "title": "./zhouji/1.png",
             "subtitle": "远古(旧石器时代)",
             "content": "<p>筏利用浮力漂浮,以撑篙在较浅的水域航行,是人类最早的水面交通工具之一。</p>"
           },
           {
             "id": 2,
-            "imgs": ["/zhouji/2.png"],
+            "imgs": ["./zhouji/2.png"],
             "title": "跨湖桥遗址独木舟、木桨",
             "subtitle": "新石器时代",
             "content": "<p>世界上已知最古老的独木舟,体现了人类挖槽制舟的智慧。</p>"
           },
           {
             "id": 3,
-            "imgs": ["/zhouji/3.png"],
+            "imgs": ["./zhouji/3.png"],
             "title": "艅艎",
             "subtitle": "春秋",
             "content": "<p>吴王僚的王舟,也是吴国水师的指挥旗舰,体型高大,能攻善守。</p>"
           },
           {
             "id": 4,
-            "imgs": ["/zhouji/4.png"],
+            "imgs": ["./zhouji/4.png"],
             "title": "大翼",
             "subtitle": "春秋",
             "content": "<p>吴王阖闾的水师船队包括大翼、中翼、小翼、突冒、楼船、桥船等。大翼是其中的主力战舰。</p>"
           },
           {
             "id": 5,
-            "imgs": ["/zhouji/5.png"],
+            "imgs": ["./zhouji/5.png"],
             "title": "楼船",
             "subtitle": "汉代",
             "content": "<p>综合性战船,通常在较大船舶的甲板之上建筑楼层,因此得名。水师中的主力战舰</p>"
           },
           {
             "id": 6,
-            "imgs": ["/zhouji/6.png"],
+            "imgs": ["./zhouji/6.png"],
             "title": "双体舫船",
             "subtitle": "晋代",
             "content": "<p>为两船并联,可增大甲板面积,增加承载量,更加安全平稳。</p>"
           },
           {
             "id": 7,
-            "imgs": ["/zhouji/7.png"],
+            "imgs": ["./zhouji/7.png"],
             "title": "龙舟",
             "subtitle": "隋",
             "content": "<p>隋炀帝游幸江都(今扬州)时乘坐的御舟。随行的妃嫔、诸王、公主的座船共有数千艘。</p>"
           },
           {
             "id": 8,
-            "imgs": ["/zhouji/8.png"],
+            "imgs": ["./zhouji/8.png"],
             "title": "凤舟",
             "subtitle": "隋",
             "content": "<p>皇后的凤舟,比龙舟稍小,装饰豪华无异。</p>"
           },
           {
             "id": 9,
-            "imgs": ["/zhouji/9.png"],
+            "imgs": ["./zhouji/9.png"],
             "title": "如皋木船",
             "subtitle": "唐",
             "content": "<p>使用水密舱技术。船身复原后长17.32米,共有9舱,各舱之间都安装隔舱板。</p>"
           },
           {
             "id": 10,
-            "imgs": ["/zhouji/10.png"],
+            "imgs": ["./zhouji/10.png"],
             "title": "柳孜运河一号船",
             "subtitle": "唐",
             "content": "<p>出土有一批沉船及大量瓷器。该船复原后长18.97米,船尾有拖舵。</p>"
           },
           {
             "id": 11,
-            "imgs": ["/zhouji/11.png"],
+            "imgs": ["./zhouji/11.png"],
             "title": "天津静海古船",
             "subtitle": "宋",
             "content": "<p>古运河旧道出土,造于政和七年(公元1117年)之前的运粮船,船长14.62米。</p>"
           },
           {
             "id": 12,
-            "imgs": ["/zhouji/12.png"],
+            "imgs": ["./zhouji/12.png"],
             "title": "磁县五号漕船",
             "subtitle": "元",
             "content": "<p>元末运粮官船。共出土6艘。该船长约16.6米,保存十一舱,船尾设平衡舵。</p>"
           },
           {
             "id": 13,
-            "imgs": ["/zhouji/13.png"],
+            "imgs": ["./zhouji/13.png"],
             "title": "三吴浪船",
             "subtitle": "明清",
             "content": "<p>船首方形便于上下客。因航行灵活、价廉,在江浙十分常见,数以万计。</p>"
           },
           {
             "id": 14,
-            "imgs": ["/zhouji/15.png"],
+            "imgs": ["./zhouji/15.png"],
             "title": "沙船",
             "subtitle": "明清",
             "content": "<p>防沙平底方船,多桅多帆,吃水浅、载重量大,行驶平稳,搁浅不易翻沉,海上可航行。</p>"
           },
           {
             "id": 15,
-            "imgs": ["/zhouji/16.png"],
+            "imgs": ["./zhouji/16.png"],
             "title": "张湾古船",
             "subtitle": "明",
             "content": "<p>转乘大船货物的小型驳船,一般长十多米,可载100多石粮食单独行驶,也可连成一串由拖船拖带航行。</p>"
           },
           {
             "id": 16,
-            "imgs": ["/zhouji/19.png"],
+            "imgs": ["./zhouji/19.png"],
             "title": "邵伯划子",
             "subtitle": "清",
             "content": "<p>邵伯湖和洪泽湖地域的主要运输船。大船无法靠岸时,需小船来接驳人员和货物。</p>"
           },
           {
             "id": 17,
-            "imgs": ["/zhouji/20.png"],
+            "imgs": ["./zhouji/20.png"],
             "title": "太湖七扇子",
             "subtitle": "清",
             "content": "<p>因展开的风帆如七把扇子而得名,是我国淡水捕捞中最大的渔船,船长约25米。</p>"
           },
           {
             "id": 18,
-            "imgs": ["/zhouji/21.png"],
+            "imgs": ["./zhouji/21.png"],
             "title": "洛阳一号古船",
             "subtitle": "清",
             "content": "<p>船长20.15米,首尾有生活舱,中部为货舱,用于运送客人和粮食等物资。</p>"
           },
           {
             "id": 19,
-            "imgs": ["/zhouji/23.png"],
+            "imgs": ["./zhouji/23.png"],
             "title": "绍兴乌篷船",
             "subtitle": "清至现代",
             "content": "<p>浙江绍兴独特的水上交通工具,船身狭小,船篷低矮,可坐可卧,因竹篾篷被涂成黑色而得名。</p>"
@@ -152,126 +152,126 @@
         "list": [
           {
             "id": 1,
-            "imgs": ["/zhouji/25.png"],
+            "imgs": ["./zhouji/25.png"],
             "title": "万历皇帝座船",
             "subtitle": "明",
             "content": "<p>明世宗万历皇帝谒陵时走水路还宫所乘坐的御舟。</p>"
           },
           {
             "id": 2,
-            "imgs": ["/zhouji/26.png"],
+            "imgs": ["./zhouji/26.png"],
             "title": "预备大黄船",
             "subtitle": "明",
             "content": "<p>皇帝出巡专用座船,停泊于通州,装饰豪华,制作精美,预备者,备巡幸也。</p>"
           },
           {
             "id": 3,
-            "imgs": ["/zhouji/30.png"],
+            "imgs": ["./zhouji/30.png"],
             "title": "康熙座船",
             "subtitle": "清",
             "content": "<p>船中部为大客舱,后为四扇篷客舱,船首为观景空间,桅杆上挂黄旗。</p>"
           },
           {
             "id": 4,
-            "imgs": ["/zhouji/31.png"],
+            "imgs": ["./zhouji/31.png"],
             "title": "安福舻",
             "subtitle": "清",
             "content": "<p>乾隆南巡时御舟,长28.9米,宽6米,仅拉纤的河兵就三千六百人。</p>"
           },
           {
             "id": 5,
-            "imgs": ["/zhouji/33.png"],
+            "imgs": ["./zhouji/33.png"],
             "title": "漕粮查验船",
             "subtitle": "清",
             "content": "<p>漕粮官员乘座的官船,对来自全国各地的漕运船队现场查验和记录。</p>"
           },
           {
             "id": 6,
-            "imgs": ["/zhouji/35.png"],
+            "imgs": ["./zhouji/35.png"],
             "title": "官船",
             "subtitle": "清",
             "content": "<p>属于舫船型,做工考究、舒适,船尾设舵尾楼,便于瞭望、驾驶。</p>"
           },
           {
             "id": 7,
-            "imgs": ["/zhouji/36.png"],
+            "imgs": ["./zhouji/36.png"],
             "title": "站船",
             "subtitle": "清",
             "content": "<p>古代水路、陆路,设有大量的驿站,站船专用于水路,船规格有多种。</p>"
           },
           {
             "id": 8,
-            "imgs": ["/zhouji/38.png"],
+            "imgs": ["./zhouji/38.png"],
             "title": "仙船",
             "subtitle": "明清",
             "content": "<p>又名飞仙船,民间高级客船,模仿官府的站船而建,京杭运河上常见。</p>"
           },
           {
             "id": 9,
-            "imgs": ["/zhouji/40.png"],
+            "imgs": ["./zhouji/40.png"],
             "title": "烧香船",
             "subtitle": "清",
             "content": "<p>富庶人家所用,原是官船,后演变为香船,接送进香客,可供饭菜。</p>"
           },
           {
             "id": 10,
-            "imgs": ["/zhouji/41.png"],
+            "imgs": ["./zhouji/41.png"],
             "title": "画舫",
             "subtitle": "清",
             "content": "<p>豪华游船,供皇家贵族、江南富庶人家游玩使用。</p>"
           },
           {
             "id": 11,
-            "imgs": ["/zhouji/43.png"],
+            "imgs": ["./zhouji/43.png"],
             "title": "苏州渡船",
             "subtitle": "清",
             "content": "<p>船小、瘦长、灵活,可载客,适于狭窄水域,有一顶竹篾雨篷遮风挡雨。</p>"
           },
           {
             "id": 12,
-            "imgs": ["/zhouji/46.png"],
+            "imgs": ["./zhouji/46.png"],
             "title": "北直隶船",
             "subtitle": "明清",
             "content": "<p>北京、天津地域的漕运船。货重一般为400吨左右,船型属平底沙船。</p>"
           },
           {
             "id": 13,
-            "imgs": ["/zhouji/47.png"],
+            "imgs": ["./zhouji/47.png"],
             "title": "漕运驳船",
             "subtitle": "明清",
             "content": "<p>转运漕粮的船,平底吃水浅。除漕米外,空闲时可载运商货、盐斤。</p>"
           },
           {
             "id": 14,
-            "imgs": ["/zhouji/48.png"],
+            "imgs": ["./zhouji/48.png"],
             "title": "潞河漕船",
             "subtitle": "明清",
             "content": "<p>潞河也称北运河,连通京津。元代起,皇家所需物资从南方用船运来。</p>"
           },
           {
             "id": 15,
-            "imgs": ["/zhouji/50.png"],
+            "imgs": ["./zhouji/50.png"],
             "title": "盐船",
             "subtitle": "清",
             "content": "<p>与一般的运输船不同,运盐船大都有承载重量大,吃水深、航速较慢。</p>"
           },
           {
             "id": 16,
-            "imgs": ["/zhouji/55.png"],
+            "imgs": ["./zhouji/55.png"],
             "title": "常熟米包子",
             "subtitle": "明清",
             "content": "<p>原系漕船,因专运粮米而得名,又称“运米船”。</p>"
           },
           {
             "id": 17,
-            "imgs": ["/zhouji/59.png"],
+            "imgs": ["./zhouji/59.png"],
             "title": "无锡西漳船",
             "subtitle": "清",
             "content": "<p>内河货运主要船型,舱容大、稳性好、航速快,还用于往返城乡间客船。</p>"
           },
           {
             "id": 18,
-            "imgs": ["/zhouji/63.png"],
+            "imgs": ["./zhouji/63.png"],
             "title": "瓜洲丝网船",
             "subtitle": "清",
             "content": "<p>划桨灵活,吃水浅,能搁置滩上。</p>"
@@ -285,56 +285,56 @@
         "list": [
           {
             "id": 1,
-            "imgs": ["/zhouji/67.png"],
+            "imgs": ["./zhouji/67.png"],
             "title": "汴河万石货船",
             "subtitle": "宋",
             "content": "<p>汴河漕船。船面上层是拱形舱,抗张力强,较为省料,自重轻。</p>"
           },
           {
             "id": 2,
-            "imgs": ["/zhouji/64.png"],
+            "imgs": ["./zhouji/64.png"],
             "title": "汴河客货船",
             "subtitle": "宋",
             "content": "<p>主舱内部拓宽,可放置货物。主舱窗外都挂上防护木板,可见货运紧迫。</p>"
           },
           {
             "id": 3,
-            "imgs": ["/zhouji/69.png"],
+            "imgs": ["./zhouji/69.png"],
             "title": "无锡快船",
             "subtitle": "明",
             "content": "<p>江南一带多见,用于旅客乘坐及货物运输。</p>"
           },
           {
             "id": 4,
-            "imgs": ["/zhouji/70.png"],
+            "imgs": ["./zhouji/70.png"],
             "title": "端午龙舟",
             "subtitle": "清",
             "content": "<p>江南地区端午时节龙舟竞赛船。装饰华丽,旗帜、锣鼓等一应俱全。</p>"
           },
           {
             "id": 5,
-            "imgs": ["/zhouji/72.png"],
+            "imgs": ["./zhouji/72.png"],
             "title": "杂技船",
             "subtitle": "清",
             "content": "<p>江南地区端午时节,龙舟竞赛时的杂技表演船。</p>"
           },
           {
             "id": 6,
-            "imgs": ["/zhouji/73.png"],
+            "imgs": ["./zhouji/73.png"],
             "title": "苏州漕船",
             "subtitle": "清",
             "content": "<p>苏州一带粮食运输船。元代漕运主要是海运。永乐迁都后改为河运。</p>"
           },
           {
             "id": 7,
-            "imgs": ["/zhouji/75.png"],
+            "imgs": ["./zhouji/75.png"],
             "title": "状元船",
             "subtitle": "清",
             "content": "<p>明清江南一带的舫船,因供状元游行得名,大户人家可用来迎亲或看戏。</p>"
           },
           {
             "id": 8,
-            "imgs": ["/zhouji/77.png"],
+            "imgs": ["./zhouji/77.png"],
             "title": "灯舫",
             "subtitle": "清",
             "content": "<p>装饰豪华,张灯结彩进苏州城。可能绘的是去灵岩山之行的来回场面。</p>"

public/zhouji/12.png → public/book-fair/zhouji/12.png


public/zhouji/13.png → public/book-fair/zhouji/13.png


public/zhouji/15.png → public/book-fair/zhouji/15.png


public/zhouji/16.png → public/book-fair/zhouji/16.png


public/zhouji/19.png → public/book-fair/zhouji/19.png


public/zhouji/20.png → public/book-fair/zhouji/20.png


public/zhouji/21.png → public/book-fair/zhouji/21.png


public/zhouji/23.png → public/book-fair/zhouji/23.png


public/zhouji/25.png → public/book-fair/zhouji/25.png


public/zhouji/26.png → public/book-fair/zhouji/26.png


public/zhouji/30.png → public/book-fair/zhouji/30.png


public/zhouji/31.png → public/book-fair/zhouji/31.png


public/zhouji/33.png → public/book-fair/zhouji/33.png


public/zhouji/35.png → public/book-fair/zhouji/35.png


public/zhouji/36.png → public/book-fair/zhouji/36.png


public/zhouji/38.png → public/book-fair/zhouji/38.png


public/zhouji/40.png → public/book-fair/zhouji/40.png


public/zhouji/41.png → public/book-fair/zhouji/41.png


public/zhouji/43.png → public/book-fair/zhouji/43.png


public/zhouji/46.png → public/book-fair/zhouji/46.png


public/zhouji/47.png → public/book-fair/zhouji/47.png


public/beituo/01@2x-min.png → public/monument/beituo/01@2x-min.png


public/beituo/02@2x-min.png → public/monument/beituo/02@2x-min.png


public/beituo/03@2x-min.png → public/monument/beituo/03@2x-min.png


public/beituo/04@2x-min.png → public/monument/beituo/04@2x-min.png


public/beituo/1/0-1.png → public/monument/beituo/1/0-1.png


public/beituo/1/0.png → public/monument/beituo/1/0.png


public/beituo/1/1.png → public/monument/beituo/1/1.png


public/beituo/1/10.png → public/monument/beituo/1/10.png


public/beituo/1/2.png → public/monument/beituo/1/2.png


public/beituo/1/3.png → public/monument/beituo/1/3.png


public/beituo/1/4-2.png → public/monument/beituo/1/4-2.png


public/beituo/1/4.png → public/monument/beituo/1/4.png


public/beituo/1/5.png → public/monument/beituo/1/5.png


public/beituo/1/6.png → public/monument/beituo/1/6.png


public/beituo/1/7.png → public/monument/beituo/1/7.png


public/beituo/1/8.png → public/monument/beituo/1/8.png


public/beituo/1/9.png → public/monument/beituo/1/9.png


public/beituo/2/1.png → public/monument/beituo/2/1.png


public/beituo/2/2.png → public/monument/beituo/2/2.png


public/beituo/2/3.png → public/monument/beituo/2/3.png


public/beituo/2/4.png → public/monument/beituo/2/4.png


public/beituo/2/5.png → public/monument/beituo/2/5.png


public/beituo/2/6.png → public/monument/beituo/2/6.png


public/beituo/2/7-2.png → public/monument/beituo/2/7-2.png


public/beituo/2/7-3.png → public/monument/beituo/2/7-3.png


public/beituo/2/7-4.png → public/monument/beituo/2/7-4.png


public/beituo/2/7-5.png → public/monument/beituo/2/7-5.png


public/beituo/2/7-6.png → public/monument/beituo/2/7-6.png


public/beituo/2/7.png → public/monument/beituo/2/7.png


public/beituo/2/8.png → public/monument/beituo/2/8.png


public/beituo/2/9.png → public/monument/beituo/2/9.png


public/beituo/3/1.png → public/monument/beituo/3/1.png


public/beituo/3/10.png → public/monument/beituo/3/10.png


public/beituo/3/2.png → public/monument/beituo/3/2.png


public/beituo/3/3.png → public/monument/beituo/3/3.png


public/beituo/3/4.png → public/monument/beituo/3/4.png


public/beituo/3/5.png → public/monument/beituo/3/5.png


public/beituo/3/6.png → public/monument/beituo/3/6.png


public/beituo/3/7.png → public/monument/beituo/3/7.png


public/beituo/3/8.png → public/monument/beituo/3/8.png


public/beituo/3/9.png → public/monument/beituo/3/9.png


public/beituo/4/1.png → public/monument/beituo/4/1.png


public/beituo/4/2.png → public/monument/beituo/4/2.png


public/beituo/4/3.png → public/monument/beituo/4/3.png


public/beituo/4/4.png → public/monument/beituo/4/4.png


public/beituo/4/5-1.png → public/monument/beituo/4/5-1.png


public/beituo/4/5.png → public/monument/beituo/4/5.png


public/beituo/4/6-1.png → public/monument/beituo/4/6-1.png


public/beituo/4/6.png → public/monument/beituo/4/6.png


public/beituo/4/7-1.png → public/monument/beituo/4/7-1.png


public/beituo/4/7.png → public/monument/beituo/4/7.png


public/beituo/4/8.png → public/monument/beituo/4/8.png


public/beituo/icon_frame_blue@2x.png → public/monument/beituo/icon_frame_blue@2x.png


public/beituo/icon_frame_blue_r@2x.png → public/monument/beituo/icon_frame_blue_r@2x.png


public/beituo/icon_frame_golden@2x.png → public/monument/beituo/icon_frame_golden@2x.png


public/beituo/icon_frame_golden_r@2x.png → public/monument/beituo/icon_frame_golden_r@2x.png


public/beituo/icon_frame_white@2x.png → public/monument/beituo/icon_frame_white@2x.png


public/beituo/icon_frame_white_r@2x.png → public/monument/beituo/icon_frame_white_r@2x.png


public/monumentData.json → public/monument/monumentData.json


+ 4 - 11
src/App.vue

@@ -6,16 +6,14 @@ import { RouterView, useRoute, useRouter } from 'vue-router'
 const route = useRoute()
 const router = useRouter()
 const offset = ref({ x: 32, y: window.innerHeight - 100 })
-const showBackIcon = computed(
-  () => !['home', 'book-fair-home'].includes((route.name || '') as string)
-)
+const showBackIcon = computed(() => !['home'].includes((route.name || '') as string))
 
 const back = () => {
   if (window.history.state.back) {
     router.go(-1)
   } else {
     router.replace({
-      name: ((route.name || '') as string).indexOf('monument') > -1 ? 'home' : 'book-fair-home'
+      name: 'home'
     })
   }
 }
@@ -23,7 +21,7 @@ const back = () => {
 
 <template>
   <router-view v-slot="{ Component }">
-    <keep-alive include="monument,book-fair">
+    <keep-alive include="book-fair">
       <component :is="Component" />
     </keep-alive>
   </router-view>
@@ -35,12 +33,7 @@ const back = () => {
     magnetic="x"
     @click="back"
   >
-    <img
-      v-if="((route.name || '') as string).indexOf('monument') > -1"
-      class="back-icon"
-      src="@/assets/images/btn_back_beita@2x.png"
-    />
-    <img draggable="false" v-else class="back-icon" src="@/assets/images/btn_back_zhouji@2x.png" />
+    <img draggable="false" class="back-icon" src="@/assets/images/btn_back_zhouji@2x.png" />
   </van-floating-bubble>
 </template>
 

+ 51 - 0
src/monument.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ref } from 'vue'
+import { RouterView, useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+const offset = ref({ x: 32, y: window.innerHeight - 100 })
+const showBackIcon = computed(() => !['home'].includes((route.name || '') as string))
+
+const back = () => {
+  if (window.history.state.back) {
+    router.go(-1)
+  } else {
+    router.replace({
+      name: 'home'
+    })
+  }
+}
+</script>
+
+<template>
+  <router-view v-slot="{ Component }">
+    <keep-alive include="monument">
+      <component :is="Component" />
+    </keep-alive>
+  </router-view>
+
+  <van-floating-bubble
+    v-if="showBackIcon"
+    v-model:offset="offset"
+    axis="xy"
+    magnetic="x"
+    @click="back"
+  >
+    <img class="back-icon" src="@/assets/images/btn_back_beita@2x.png" />
+  </van-floating-bubble>
+</template>
+
+<style lang="scss">
+@import '@/assets/base.scss';
+
+.van-floating-bubble {
+  --van-floating-bubble-size: 108px;
+  --van-floating-bubble-border-radius: 0;
+  --van-floating-bubble-background: transparent;
+}
+.back-icon {
+  width: 100%;
+}
+</style>

+ 2 - 20
src/router/index.ts

@@ -1,8 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import Home from '../views/Home/index.vue'
 import BookFair from '../views/BookFair/index.vue'
-import Monument from '../views/Monument/index.vue'
-import MonumentDetail from '../views/MonumentDetail/index.vue'
 import BookFairDetail from '../views/BookFairDetail/index.vue'
 import BookFairHome from '../views/BookFairHome/index.vue'
 
@@ -12,30 +9,15 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: Home
-    },
-    {
-      path: '/book-fair-home',
-      name: 'book-fair-home',
       component: BookFairHome
     },
     {
-      path: '/monument/:id/:secondId',
-      name: 'monument',
-      component: Monument
-    },
-    {
-      path: '/monument-detail/:id/:sid/:detailId',
-      name: 'monument-detail',
-      component: MonumentDetail
-    },
-    {
-      path: '/book-fair/:id/:secondId',
+      path: '/list/:id/:secondId',
       name: 'book-fair',
       component: BookFair
     },
     {
-      path: '/book-fair-detail/:id/:sid/:detailId',
+      path: '/detail/:id/:sid/:detailId',
       name: 'book-fair-detail',
       component: BookFairDetail
     }

+ 27 - 0
src/router/monument.ts

@@ -0,0 +1,27 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import Home from '../views/Home/index.vue'
+import Monument from '../views/Monument/index.vue'
+import MonumentDetail from '../views/MonumentDetail/index.vue'
+
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/list/:id/:secondId',
+      name: 'monument',
+      component: Monument
+    },
+    {
+      path: '/detail/:id/:sid/:detailId',
+      name: 'monument-detail',
+      component: MonumentDetail
+    }
+  ]
+})
+
+export default router

+ 0 - 11
src/stores/index.ts

@@ -1,11 +0,0 @@
-import { useBookFairStore } from './bookFair'
-import { useMonumentStore } from './monument'
-
-export default function useStore() {
-  return {
-    bookFair: useBookFairStore(),
-    monument: useMonumentStore()
-  }
-}
-
-export * from './types'

+ 3 - 3
src/views/BookFair/index.vue

@@ -57,8 +57,8 @@ import { watch, computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { TabsInstance } from 'vant'
 import { onMounted } from 'vue'
-import useStore from '@/stores'
-import type { IList } from '@/stores'
+import { useBookFairStore } from '@/stores/bookFair'
+import type { IList } from '@/stores/types'
 
 interface ISupList extends IList {
   showFullInfo: boolean
@@ -66,7 +66,7 @@ interface ISupList extends IList {
 
 const route = useRoute()
 const router = useRouter()
-const { bookFair } = useStore()
+const bookFair = useBookFairStore()
 const active = ref(0)
 const loading = ref(true)
 const infoRef = ref<HTMLElement[]>()

+ 2 - 2
src/views/BookFairDetail/index.vue

@@ -48,11 +48,11 @@
 import { ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import type { SwipeInstance } from 'vant'
-import useStore from '@/stores'
+import { useBookFairStore } from '@/stores/bookFair'
 import './index.scss'
 
 const route = useRoute()
-const { bookFair } = useStore()
+const bookFair = useBookFairStore()
 const swipeRef = ref<SwipeInstance>()
 const showPreview = ref(false)
 const previewIndex = ref(0)

+ 3 - 7
src/views/Monument/index.vue

@@ -59,23 +59,19 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeMount, computed } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { TabsInstance } from 'vant'
-import useStore from '@/stores'
+import { useMonumentStore } from '@/stores/monument'
 
 const route = useRoute()
 const router = useRouter()
 const active = ref(0)
 const loading = ref(true)
-const { monument } = useStore()
+const monument = useMonumentStore()
 const tabsRef = ref<TabsInstance>()
 const model = computed(() => monument.data.find((item) => item.id === Number(route.params.id)))
 
-onBeforeMount(() => {
-  document.title = '运河沿线碑拓展'
-})
-
 onMounted(() => {
   setTimeout(() => {
     tabsRef.value?.scrollTo(Number(route.params.secondId))

+ 2 - 2
src/views/MonumentDetail/index.vue

@@ -53,11 +53,11 @@
 import { ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { type SwipeInstance } from 'vant'
-import useStore from '@/stores'
+import { useMonumentStore } from '@/stores/monument'
 import './index.scss'
 
 const route = useRoute()
-const { monument } = useStore()
+const monument = useMonumentStore()
 const swipeRef = ref<SwipeInstance>()
 const showPreview = ref(false)
 const previewIndex = ref(0)

+ 1 - 1
tsconfig.app.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.json"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.json", "monument/main.ts"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,

+ 9 - 0
vite.config.ts

@@ -5,6 +5,7 @@ import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import Components from 'unplugin-vue-components/vite'
 import { VantResolver } from '@vant/auto-import-resolver'
+import { resolve } from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -20,5 +21,13 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        monument: resolve(__dirname, 'monument/index.html'),
+        bookFair: resolve(__dirname, 'book-fair/index.html')
+      }
+    }
   }
 })