myData.js 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892
  1. window.isHH = document.documentElement.clientWidth >= document.documentElement.clientHeight
  2. const isPcTemp = document.documentElement.clientWidth >= 1200
  3. // 本地开发静态资源目录
  4. const baseUrlLoc = 'http://192.168.20.55:8080/staticData/'
  5. // Build开发资源目录
  6. const baseUrlAtl = 'xxxxxxxxxxxxxxxxx/staticData/'
  7. // 一些动态配置的数据
  8. const myDataTemp = {
  9. // 每次刷新页面都从首页开始/每次进页面都有加载中动画
  10. isLdong: true,
  11. // 首页(静态资源目录位置:staticData/HH/home)
  12. home: {
  13. // 背景图路径+名字
  14. bgImg: 'home/bg.jpg',
  15. // 左下角动画视频路径+名字
  16. leftVideo: 'home/left.mp4',
  17. // 主动画
  18. videos: ['home/1.mp4'],
  19. // 最后的过场动画路径+名字
  20. lastVideo: 'home/end.mp4'
  21. },
  22. // 车骑拜谒(静态资源目录位置:staticData/HH/visit)
  23. visit: {
  24. // 开场动画视频名字
  25. videoSta: 'visit/base.mp4',
  26. // 过度视频
  27. videos: ['visit/1.mp4'],
  28. // 最后的过场动画路径+名字
  29. lastVideo: 'visit/end.mp4',
  30. // 热点
  31. hot: [
  32. {
  33. // 热点名字
  34. name: '周礼九拜',
  35. // 热点大小
  36. size: 1,
  37. // 垂直方向
  38. atv: 5,
  39. // 水平方向
  40. ath: 0,
  41. // pc鼠标移入显示的图片路径+名字
  42. hoverSrc: 'visit/hot/hot1.png',
  43. data: [
  44. {
  45. // 名字
  46. name: '稽首',
  47. // 文本内容
  48. txt: `
  49. <h3>双膝跪地,双手扶地,</h3>
  50. <h2>头向下至地,稽留一段时间。</h2>
  51. <br/>
  52. <p>《周礼》把跪与其他肢体动作结合所形成的礼仪动作称为"拜",</p>
  53. <p>"拜"共有九种,九拜的共同之处即都有跪的动作,</p>
  54. <p>凡拜必跪,不跪不为拜。</p>
  55. `,
  56. // 图片路径+名字
  57. imgArr: ['visit/hot/1.jpg', 'visit/hot/2.jpg', 'visit/hot/3.jpg']
  58. },
  59. {
  60. // 名字
  61. name: '顿首',
  62. // 文本内容
  63. txt: `
  64. <h3>双膝跪地,双手扶地,</h3>
  65. <h2>头向下至地,稽留一段时间。</h2>
  66. <br/>
  67. <p>《周礼》把跪与其他肢体动作结合所形成的礼仪动作称为"拜",</p>
  68. <p>"拜"共有九种,九拜的共同之处即都有跪的动作,</p>
  69. <p>凡拜必跪,不跪不为拜。</p>
  70. `,
  71. // 图片路径+名字
  72. imgArr: ['visit/hot/1.jpg', 'visit/hot/2.jpg']
  73. },
  74. {
  75. // 名字
  76. name: '空首',
  77. // 文本内容
  78. txt: `
  79. <h3>双膝跪地,双手扶地,</h3>
  80. <h2>头向下至地,稽留一段时间。</h2>
  81. <br/>
  82. <p>《周礼》把跪与其他肢体动作结合所形成的礼仪动作称为"拜",</p>
  83. <p>"拜"共有九种,九拜的共同之处即都有跪的动作,</p>
  84. <p>凡拜必跪,不跪不为拜。</p>
  85. `,
  86. // 图片路径+名字
  87. imgArr: ['visit/hot/1.jpg']
  88. },
  89. {
  90. // 名字
  91. name: '稽首',
  92. // 文本内容
  93. txt: `
  94. <h3>双膝跪地,双手扶地,</h3>
  95. <h2>头向下至地,稽留一段时间。</h2>
  96. <br/>
  97. <p>《周礼》把跪与其他肢体动作结合所形成的礼仪动作称为"拜",</p>
  98. <p>"拜"共有九种,九拜的共同之处即都有跪的动作,</p>
  99. <p>凡拜必跪,不跪不为拜。</p>
  100. `,
  101. // 图片路径+名字
  102. imgArr: ['visit/hot/1.jpg', 'visit/hot/2.jpg', 'visit/hot/3.jpg']
  103. },
  104. {
  105. // 名字
  106. name: '顿首',
  107. // 文本内容
  108. txt: `
  109. <h3>双膝跪地,双手扶地,</h3>
  110. <h2>头向下至地,稽留一段时间。</h2>
  111. <br/>
  112. <p>《周礼》把跪与其他肢体动作结合所形成的礼仪动作称为"拜",</p>
  113. <p>"拜"共有九种,九拜的共同之处即都有跪的动作,</p>
  114. <p>凡拜必跪,不跪不为拜。</p>
  115. `,
  116. // 图片路径+名字
  117. imgArr: ['visit/hot/1.jpg', 'visit/hot/2.jpg']
  118. },
  119. {
  120. // 名字
  121. name: '空首',
  122. // 文本内容
  123. txt: `
  124. <h3>双膝跪地,双手扶地,</h3>
  125. <h2>头向下至地,稽留一段时间。</h2>
  126. <br/>
  127. <p>《周礼》把跪与其他肢体动作结合所形成的礼仪动作称为"拜",</p>
  128. <p>"拜"共有九种,九拜的共同之处即都有跪的动作,</p>
  129. <p>凡拜必跪,不跪不为拜。</p>
  130. `,
  131. // 图片路径+名字
  132. imgArr: ['visit/hot/1.jpg']
  133. },
  134. {
  135. // 名字
  136. name: '稽首',
  137. // 文本内容
  138. txt: `
  139. <h3>双膝跪地,双手扶地,</h3>
  140. <h2>头向下至地,稽留一段时间。</h2>
  141. <br/>
  142. <p>《周礼》把跪与其他肢体动作结合所形成的礼仪动作称为"拜",</p>
  143. <p>"拜"共有九种,九拜的共同之处即都有跪的动作,</p>
  144. <p>凡拜必跪,不跪不为拜。</p>
  145. `,
  146. // 图片路径+名字
  147. imgArr: ['visit/hot/1.jpg', 'visit/hot/2.jpg', 'visit/hot/3.jpg']
  148. },
  149. {
  150. // 名字
  151. name: '顿首',
  152. // 文本内容
  153. txt: `
  154. <h3>双膝跪地,双手扶地,</h3>
  155. <h2>头向下至地,稽留一段时间。</h2>
  156. <br/>
  157. <p>《周礼》把跪与其他肢体动作结合所形成的礼仪动作称为"拜",</p>
  158. <p>"拜"共有九种,九拜的共同之处即都有跪的动作,</p>
  159. <p>凡拜必跪,不跪不为拜。</p>
  160. `,
  161. // 图片路径+名字
  162. imgArr: ['visit/hot/1.jpg', 'visit/hot/2.jpg']
  163. },
  164. {
  165. // 名字
  166. name: '空首',
  167. // 文本内容
  168. txt: `
  169. <h3>双膝跪地,双手扶地,</h3>
  170. <h2>头向下至地,稽留一段时间。</h2>
  171. <br/>
  172. <p>《周礼》把跪与其他肢体动作结合所形成的礼仪动作称为"拜",</p>
  173. <p>"拜"共有九种,九拜的共同之处即都有跪的动作,</p>
  174. <p>凡拜必跪,不跪不为拜。</p>
  175. `,
  176. // 图片路径+名字
  177. imgArr: ['visit/hot/1.jpg']
  178. }
  179. ]
  180. },
  181. {
  182. // 热点名字
  183. name: '拥彗迎宾',
  184. // 热点大小
  185. size: 1,
  186. // 垂直方向
  187. atv: 5,
  188. // 水平方向
  189. ath: 0,
  190. // pc鼠标移入显示的图片路径+名字
  191. hoverSrc: 'visit/hot/hot1.png',
  192. data: [
  193. {
  194. name: '高亮1',
  195. txt: `
  196. <p>111汉代,我国古代屋顶的几种基本形式如悬山、庑殿、歇山、攒尖等均已出现。此外,还有盝顶和囤顶。其中最常见的是悬山顶和庑殿顶。悬山顶用于一般房舍,庑殿顶用于规格较高的建筑物。这时,歇山顶的结构尚未成熟,攒尖顶在汉代也较为少见。 悬山顶又叫“挑山”或“厦两头”,其特点是木檩露出山墙外,即所谓“出梢”,悬山屋顶一直延伸到山墙外。两侧的山墙凹进屋顶,使顶上的檩端伸出墙外,钉以搏风板。在规格上仅次于庑殿顶、歇山顶。悬山顶一般有正脊和垂脊,也有用无正脊的卷棚,山墙的山尖部分常做成五花山墙。</p>
  197. `,
  198. imgArr: ['visit/hot/4.png']
  199. },
  200. {
  201. name: '高亮2',
  202. txt: `
  203. <p>222汉代,我国古代屋顶的几种基本形式如悬山、庑殿、歇山、攒尖等均已出现。此外,还有盝顶和囤顶。其中最常见的是悬山顶和庑殿顶。悬山顶用于一般房舍,庑殿顶用于规格较高的建筑物。这时,歇山顶的结构尚未成熟,攒尖顶在汉代也较为少见。 悬山顶又叫“挑山”或“厦两头”,其特点是木檩露出山墙外,即所谓“出梢”,悬山屋顶一直延伸到山墙外。两侧的山墙凹进屋顶,使顶上的檩端伸出墙外,钉以搏风板。在规格上仅次于庑殿顶、歇山顶。悬山顶一般有正脊和垂脊,也有用无正脊的卷棚,山墙的山尖部分常做成五花山墙。</p>
  204. `,
  205. imgArr: ['visit/hot/4.png']
  206. },
  207. {
  208. name: '高亮3',
  209. txt: `
  210. <p>333汉代,我国古代屋顶的几种基本形式如悬山、庑殿、歇山、攒尖等均已出现。此外,还有盝顶和囤顶。其中最常见的是悬山顶和庑殿顶。悬山顶用于一般房舍,庑殿顶用于规格较高的建筑物。这时,歇山顶的结构尚未成熟,攒尖顶在汉代也较为少见。 悬山顶又叫“挑山”或“厦两头”,其特点是木檩露出山墙外,即所谓“出梢”,悬山屋顶一直延伸到山墙外。两侧的山墙凹进屋顶,使顶上的檩端伸出墙外,钉以搏风板。在规格上仅次于庑殿顶、歇山顶。悬山顶一般有正脊和垂脊,也有用无正脊的卷棚,山墙的山尖部分常做成五花山墙。</p>
  211. `,
  212. imgArr: ['visit/hot/4.png']
  213. }
  214. ]
  215. },
  216. {
  217. // 热点名字
  218. name: '迎宾礼仪',
  219. // 热点大小
  220. size: 1,
  221. // 垂直方向
  222. atv: 5,
  223. // 水平方向
  224. ath: 0,
  225. // pc鼠标移入显示的图片路径+名字
  226. hoverSrc: 'visit/hot/hot1.png',
  227. data: [
  228. {
  229. name: '高亮1',
  230. txt: `
  231. <p>客人来拜访之时,主人到门口恭候,欢迎宾客的到来,主人向宾客揖手行礼,客人回拜,礼毕后主人请客人入门,主人从右门侧进,客人从左侧门进。《礼记·乡饮酒义》中规定:“主人拜迎宾于阳门之外,入三揖而后至阶,三让而后升,所以致尊让也”。</p>
  232. `,
  233. imgArr: ['visit/hot/5.png']
  234. }
  235. ]
  236. },
  237. {
  238. // 热点名字
  239. name: '汉代屋顶',
  240. // 热点大小
  241. size: 1,
  242. // 垂直方向
  243. atv: 5,
  244. // 水平方向
  245. ath: 0,
  246. // pc鼠标移入显示的图片路径+名字
  247. hoverSrc: 'visit/hot/hot1.png',
  248. data: [
  249. {
  250. name: '悬山顶',
  251. txt: `
  252. <p>汉代,我国古代屋顶的几种基本形式如悬山、庑殿、歇山、攒尖等均已出现。此外,还有盝顶和囤顶。其中最常见的是悬山顶和庑殿顶。悬山顶用于一般房舍,庑殿顶用于规格较高的建筑物。这时,歇山顶的结构尚未成熟,攒尖顶在汉代也较为少见。
  253. <br/>
  254. 悬山顶又叫“挑山”或“厦两头”,其特点是木檩露出山墙外,即所谓“出梢”,悬山屋顶一直延伸到山墙外。两侧的山墙凹进屋顶,使顶上的檩端伸出墙外,钉以搏风板。在规格上仅次于庑殿顶、歇山顶。悬山顶一般有正脊和垂脊,也有用无正脊的卷棚,山墙的山尖部分常做成五花山墙。</p>
  255. `,
  256. imgArr: ['visit/hot/6.png', 'visit/hot/7.png']
  257. },
  258. {
  259. name: '庑殿顶',
  260. txt: `
  261. <p>222汉代,我国古代屋顶的几种基本形式如悬山、庑殿、歇山、攒尖等均已出现。此外,还有盝顶和囤顶。其中最常见的是悬山顶和庑殿顶。悬山顶用于一般房舍,庑殿顶用于规格较高的建筑物。这时,歇山顶的结构尚未成熟,攒尖顶在汉代也较为少见。
  262. <br/>
  263. 悬山顶又叫“挑山”或“厦两头”,其特点是木檩露出山墙外,即所谓“出梢”,悬山屋顶一直延伸到山墙外。两侧的山墙凹进屋顶,使顶上的檩端伸出墙外,钉以搏风板。在规格上仅次于庑殿顶、歇山顶。悬山顶一般有正脊和垂脊,也有用无正脊的卷棚,山墙的山尖部分常做成五花山墙。</p>
  264. `,
  265. imgArr: ['visit/hot/6.png', 'visit/hot/7.png']
  266. },
  267. {
  268. name: '盝顶',
  269. txt: `
  270. <p>333汉代,我国古代屋顶的几种基本形式如悬山、庑殿、歇山、攒尖等均已出现。此外,还有盝顶和囤顶。其中最常见的是悬山顶和庑殿顶。悬山顶用于一般房舍,庑殿顶用于规格较高的建筑物。这时,歇山顶的结构尚未成熟,攒尖顶在汉代也较为少见。
  271. <br/>
  272. 悬山顶又叫“挑山”或“厦两头”,其特点是木檩露出山墙外,即所谓“出梢”,悬山屋顶一直延伸到山墙外。两侧的山墙凹进屋顶,使顶上的檩端伸出墙外,钉以搏风板。在规格上仅次于庑殿顶、歇山顶。悬山顶一般有正脊和垂脊,也有用无正脊的卷棚,山墙的山尖部分常做成五花山墙。</p>
  273. `,
  274. imgArr: ['visit/hot/6.png', 'visit/hot/7.png']
  275. },
  276. {
  277. name: '囤顶',
  278. txt: `
  279. <p>444汉代,我国古代屋顶的几种基本形式如悬山、庑殿、歇山、攒尖等均已出现。此外,还有盝顶和囤顶。其中最常见的是悬山顶和庑殿顶。悬山顶用于一般房舍,庑殿顶用于规格较高的建筑物。这时,歇山顶的结构尚未成熟,攒尖顶在汉代也较为少见。
  280. <br/>
  281. 悬山顶又叫“挑山”或“厦两头”,其特点是木檩露出山墙外,即所谓“出梢”,悬山屋顶一直延伸到山墙外。两侧的山墙凹进屋顶,使顶上的檩端伸出墙外,钉以搏风板。在规格上仅次于庑殿顶、歇山顶。悬山顶一般有正脊和垂脊,也有用无正脊的卷棚,山墙的山尖部分常做成五花山墙。</p>
  282. `,
  283. imgArr: ['visit/hot/6.png', 'visit/hot/7.png']
  284. },
  285. {
  286. name: '歇山顶',
  287. txt: `
  288. <p>555汉代,我国古代屋顶的几种基本形式如悬山、庑殿、歇山、攒尖等均已出现。此外,还有盝顶和囤顶。其中最常见的是悬山顶和庑殿顶。悬山顶用于一般房舍,庑殿顶用于规格较高的建筑物。这时,歇山顶的结构尚未成熟,攒尖顶在汉代也较为少见。
  289. <br/>
  290. 悬山顶又叫“挑山”或“厦两头”,其特点是木檩露出山墙外,即所谓“出梢”,悬山屋顶一直延伸到山墙外。两侧的山墙凹进屋顶,使顶上的檩端伸出墙外,钉以搏风板。在规格上仅次于庑殿顶、歇山顶。悬山顶一般有正脊和垂脊,也有用无正脊的卷棚,山墙的山尖部分常做成五花山墙。</p>
  291. `,
  292. imgArr: ['visit/hot/6.png', 'visit/hot/7.png']
  293. },
  294. {
  295. name: '攒尖顶',
  296. txt: `
  297. <p>666汉代,我国古代屋顶的几种基本形式如悬山、庑殿、歇山、攒尖等均已出现。此外,还有盝顶和囤顶。其中最常见的是悬山顶和庑殿顶。悬山顶用于一般房舍,庑殿顶用于规格较高的建筑物。这时,歇山顶的结构尚未成熟,攒尖顶在汉代也较为少见。
  298. <br/>
  299. 悬山顶又叫“挑山”或“厦两头”,其特点是木檩露出山墙外,即所谓“出梢”,悬山屋顶一直延伸到山墙外。两侧的山墙凹进屋顶,使顶上的檩端伸出墙外,钉以搏风板。在规格上仅次于庑殿顶、歇山顶。悬山顶一般有正脊和垂脊,也有用无正脊的卷棚,山墙的山尖部分常做成五花山墙。</p>
  300. `,
  301. imgArr: ['visit/hot/6.png', 'visit/hot/7.png']
  302. }
  303. ]
  304. },
  305. {
  306. // 热点名字
  307. name: '汉代车骑',
  308. // 热点大小
  309. size: 1,
  310. // 垂直方向
  311. atv: 5,
  312. // 水平方向
  313. ath: 0,
  314. // pc鼠标移入显示的图片路径+名字
  315. hoverSrc: 'visit/hot/hot1.png',
  316. data: [
  317. {
  318. name: '轺车',
  319. txt: `
  320. <h3>轺车</h3>
  321. <p>轺车是一种小而轻便的乘坐之车,车厢小,中央竖立伞形车盖,四面敞露,乘坐者可坐在车里四向远望。
  322. <br/>
  323. 汉代的车大致分为轺车、轓车、轩车、斧车、安车、辎车、軿车、輂车、温凉车、人力车、鹿车、牛车、羊车、驼车等。</p>
  324. `,
  325. imgArr: ['visit/hot/8.png']
  326. },
  327. {
  328. name: '轓车',
  329. txt: `
  330. <h3>轓车</h3>
  331. <p>轺车是一种小而轻便的乘坐之车,车厢小,中央竖立伞形车盖,四面敞露,乘坐者可坐在车里四向远望。
  332. <br/>
  333. 汉代的车大致分为轺车、轓车、轩车、斧车、安车、辎车、軿车、輂车、温凉车、人力车、鹿车、牛车、羊车、驼车等。</p>
  334. `,
  335. imgArr: ['visit/hot/8.png']
  336. }
  337. ]
  338. }
  339. ]
  340. },
  341. // 主客宴请(静态资源目录位置:staticData/HH/banquet)
  342. banquet: {
  343. // 开场动画视频名字
  344. videoSta: 'banquet/base.mp4',
  345. // 过度视频
  346. videos: ['banquet/1.mp4'],
  347. // 最后的过场动画路径+名字
  348. lastVideo: 'banquet/end.mp4',
  349. hot: [
  350. {
  351. // 热点名字
  352. name: '汉代坐姿',
  353. // 热点大小
  354. size: 1,
  355. // 垂直方向
  356. atv: 5,
  357. // 水平方向
  358. ath: 0,
  359. // pc鼠标移入显示的图片路径+名字
  360. hoverSrc: 'banquet/hot/hot1.png',
  361. data: [
  362. {
  363. name: '坐',
  364. txt: `
  365. <h3>坐</h3>
  366. <p>坐 两膝相并,双足在后,脚心在上,臀部落在脚根上为坐。跽即两膝相并,双足在后,脚心在上,膝以上身体直起是一种由坐到站的过渡状态。
  367. <br/>
  368. 666666666666666666</p>
  369. `,
  370. imgArr: ['banquet/hot/8.png']
  371. },
  372. {
  373. name: '跪',
  374. txt: `
  375. <h3>跪</h3>
  376. <p>跪跪跪跪车是一种小而轻便的乘坐之车,车厢小,中央竖立伞形车盖,四面敞露,乘坐者可坐在车里四向远望。
  377. <br/>
  378. 汉代的车大致分为轺车、轓车、轩车、斧车、安车、辎车、軿车、輂车、温凉车、人力车、鹿车、牛车、羊车、驼车等。</p>
  379. `,
  380. imgArr: ['banquet/hot/8.png']
  381. },
  382. {
  383. name: '踞',
  384. txt: `
  385. <h3>踞</h3>
  386. <p>踞踞踞踞车是一种小而轻便的乘坐之车,车厢小,中央竖立伞形车盖,四面敞露,乘坐者可坐在车里四向远望。
  387. <br/>
  388. 汉代的车大致分为轺车、轓车、轩车、斧车、安车、辎车、軿车、輂车、温凉车、人力车、鹿车、牛车、羊车、驼车等。</p>
  389. `,
  390. imgArr: ['banquet/hot/8.png']
  391. }
  392. ]
  393. },
  394. {
  395. // 热点名字
  396. name: '汉代家具',
  397. // 热点大小
  398. size: 1,
  399. // 垂直方向
  400. atv: 5,
  401. // 水平方向
  402. ath: 0,
  403. // pc鼠标移入显示的图片路径+名字
  404. hoverSrc: 'banquet/hot/hot1.png',
  405. data: [
  406. {
  407. name: '汉代家具',
  408. txt: `
  409. <h3>汉代家具</h3>
  410. `,
  411. imgArr: ['banquet/hot/8.png']
  412. }
  413. ]
  414. },
  415. {
  416. // 热点名字
  417. name: '汉代坐具',
  418. // 热点大小
  419. size: 1,
  420. // 垂直方向
  421. atv: 5,
  422. // 水平方向
  423. ath: 0,
  424. // pc鼠标移入显示的图片路径+名字
  425. hoverSrc: 'banquet/hot/hot1.png',
  426. data: [
  427. {
  428. name: '汉代坐具',
  429. txt: `
  430. <h3>汉代坐具</h3>
  431. `,
  432. imgArr: ['banquet/hot/8.png']
  433. }
  434. ]
  435. },
  436. {
  437. // 热点名字
  438. name: '三角纹彩绘陶壶',
  439. // 热点大小
  440. size: 1,
  441. // 垂直方向
  442. atv: 5,
  443. // 水平方向
  444. ath: 0,
  445. // pc鼠标移入显示的图片路径+名字
  446. hoverSrc: 'banquet/hot/hot1.png',
  447. data: [
  448. {
  449. name: '三角纹彩绘陶壶',
  450. txt: `
  451. <h3>三角纹彩绘陶壶</h3>
  452. `,
  453. imgArr: ['banquet/hot/8.png']
  454. }
  455. ]
  456. },
  457. {
  458. // 热点名字
  459. name: '五凤铜熏炉',
  460. // 热点大小
  461. size: 1,
  462. // 垂直方向
  463. atv: 5,
  464. // 水平方向
  465. ath: 0,
  466. // pc鼠标移入显示的图片路径+名字
  467. hoverSrc: 'banquet/hot/hot1.png',
  468. data: [
  469. {
  470. name: '五凤铜熏炉',
  471. txt: `
  472. <h3>五凤铜熏炉</h3>
  473. `,
  474. imgArr: ['banquet/hot/8.png']
  475. }
  476. ]
  477. },
  478. {
  479. // 热点名字
  480. name: '红绿釉陶灯',
  481. // 热点大小
  482. size: 1,
  483. // 垂直方向
  484. atv: 5,
  485. // 水平方向
  486. ath: 0,
  487. // pc鼠标移入显示的图片路径+名字
  488. hoverSrc: 'banquet/hot/hot1.png',
  489. data: [
  490. {
  491. name: '红绿釉陶灯',
  492. txt: `
  493. <h3>红绿釉陶灯</h3>
  494. `,
  495. imgArr: ['banquet/hot/8.png']
  496. }
  497. ]
  498. },
  499. {
  500. // 热点名字
  501. name: '三角纹彩绘陶鼎',
  502. // 热点大小
  503. size: 1,
  504. // 垂直方向
  505. atv: 5,
  506. // 水平方向
  507. ath: 0,
  508. // pc鼠标移入显示的图片路径+名字
  509. hoverSrc: 'banquet/hot/hot1.png',
  510. data: [
  511. {
  512. name: '三角纹彩绘陶鼎',
  513. txt: `
  514. <h3>三角纹彩绘陶鼎</h3>
  515. `,
  516. imgArr: ['banquet/hot/8.png']
  517. }
  518. ]
  519. }
  520. ]
  521. },
  522. // 乐舞百戏(静态资源目录位置:staticData/HH/dance)
  523. dance: {
  524. // 热点===>第一个为 四神云气图
  525. hot: [
  526. {
  527. // 热点名字
  528. name: '四神云气图',
  529. // 热点图片路径+名字
  530. imgSrc: 'dance/hot1.png',
  531. // 点击之后的过度动画路径+名字
  532. videoSrc: 'dance/8.mp4',
  533. // 热点定位百分比
  534. loc: {
  535. top: '10%',
  536. left: '10%'
  537. }
  538. },
  539. {
  540. // 热点名字
  541. name: '热点000',
  542. // 热点图片路径+名字
  543. imgSrc: 'dance/hot2.png',
  544. // 热点定位百分比
  545. loc: {
  546. top: '20%',
  547. left: '30%'
  548. },
  549. data: [
  550. {
  551. name: '热点001',
  552. txt: `
  553. <h3>坐1</h3>
  554. <p>坐 两膝相并,双足在后,脚心在上,臀部落在脚根上为坐。跽即两膝相并,双足在后,脚心在上,膝以上身体直起是一种由坐到站的过渡状态。
  555. <br/>
  556. 666666666666666666</p>
  557. `,
  558. imgArr: ['dance/hot/1.png']
  559. },
  560. {
  561. name: '热点002',
  562. txt: `
  563. <h3>坐2</h3>
  564. <p>坐 两膝相并,双足在后,脚心在上,臀部落在脚根上为坐。跽即两膝相并,双足在后,脚心在上,膝以上身体直起是一种由坐到站的过渡状态。
  565. <br/>
  566. 666666666666666666</p>
  567. `,
  568. imgArr: ['dance/hot/1.png']
  569. }
  570. ]
  571. }
  572. ],
  573. // 底部动作
  574. floor: [
  575. {
  576. name: '击鼓',
  577. imgSrc: 'dance/1.png',
  578. videoSrc: 'dance/1.mp4'
  579. },
  580. {
  581. name: '伴奏',
  582. imgSrc: 'dance/2.png',
  583. videoSrc: 'dance/2.mp4'
  584. },
  585. {
  586. name: '盘鼓舞',
  587. imgSrc: 'dance/3.png',
  588. videoSrc: 'dance/3.mp4'
  589. },
  590. {
  591. name: '吐火',
  592. imgSrc: 'dance/4.png',
  593. videoSrc: 'dance/4.mp4'
  594. },
  595. {
  596. name: '顶棍',
  597. imgSrc: 'dance/5.png',
  598. videoSrc: 'dance/5.mp4'
  599. },
  600. {
  601. name: '掷丸',
  602. imgSrc: 'dance/6.png',
  603. videoSrc: 'dance/6.mp4'
  604. },
  605. {
  606. name: '杂技',
  607. imgSrc: 'dance/7.png',
  608. videoSrc: 'dance/7.mp4'
  609. },
  610. {
  611. name: '相扑',
  612. imgSrc: 'dance/8.png',
  613. videoSrc: 'dance/8.mp4'
  614. }
  615. ],
  616. // 最后的过场动画路径+名字
  617. lastVideo: 'dance/end.mp4'
  618. },
  619. // 四神云气图(静态资源目录位置:staticData/HH/yun)
  620. yun: {
  621. // 背景图
  622. bjImg: 'yun/bg.png',
  623. name: '四神云气图',
  624. tit: '墓室壁画',
  625. iconArr: [
  626. {
  627. // 这里id不要自己修改!
  628. id: 1,
  629. title: '青龙',
  630. dian: [
  631. {
  632. id: '1_1',
  633. // 热点定位百分比
  634. loc: {
  635. top: '44%',
  636. left: '24%'
  637. }
  638. },
  639. {
  640. id: '1_2',
  641. // 热点定位百分比
  642. loc: {
  643. top: '45%',
  644. left: '10%'
  645. }
  646. },
  647. {
  648. id: '1_3',
  649. // 热点定位百分比
  650. loc: {
  651. top: '26%',
  652. left: '59%'
  653. }
  654. }
  655. ]
  656. },
  657. {
  658. id: 2,
  659. title: '白虎',
  660. dian: [
  661. {
  662. id: '2_1',
  663. // 热点定位百分比
  664. loc: {
  665. top: '27%',
  666. left: '11%'
  667. },
  668. change: 'scale(2) translate(88px, 25px)'
  669. }
  670. ]
  671. },
  672. {
  673. id: 3,
  674. title: '朱雀',
  675. dian: [
  676. {
  677. id: '3_1',
  678. // 热点定位百分比
  679. loc: {
  680. top: '9%',
  681. left: '51%'
  682. },
  683. change: 'scale(1.5) translate(-54px, 47px)'
  684. },
  685. {
  686. id: '3_2',
  687. // 热点定位百分比
  688. loc: {
  689. top: '49%',
  690. left: '71%'
  691. },
  692. change: 'scale(1.5) translate(-54px, 47px)'
  693. }
  694. ]
  695. },
  696. {
  697. id: 4,
  698. title: '怪兽',
  699. dian: [
  700. {
  701. id: '4_1',
  702. // 热点定位百分比
  703. loc: {
  704. top: '44%',
  705. left: '54%'
  706. },
  707. change: 'scale(1.3) translate(-37px, 1px)'
  708. },
  709. {
  710. id: '4_2',
  711. // 热点定位百分比
  712. loc: {
  713. top: '66%',
  714. left: '60%'
  715. },
  716. change: 'scale(1.3) translate(-37px, 1px)'
  717. },
  718. {
  719. id: '4_3',
  720. // 热点定位百分比
  721. loc: {
  722. top: '70%',
  723. left: '50%'
  724. },
  725. change: 'scale(1.3) translate(-37px, 1px)'
  726. }
  727. ]
  728. },
  729. {
  730. id: 5,
  731. title: '云纹',
  732. dian: [
  733. {
  734. id: '5_1',
  735. // 热点定位百分比
  736. loc: {
  737. top: '4%',
  738. left: '0.88%'
  739. }
  740. },
  741. {
  742. id: '5_2',
  743. // 热点定位百分比
  744. loc: {
  745. top: '4%',
  746. left: '42.2%'
  747. },
  748. change: 'scale(2) translate(12px, 58px)'
  749. }
  750. ]
  751. }
  752. ]
  753. },
  754. // 仙居(静态资源目录位置:staticData/HH/xian)
  755. xian: [
  756. // 这里id不要自己修改!
  757. {
  758. id: 1,
  759. name: '四神云气图',
  760. tit: '墓室壁画',
  761. txt: `
  762. <p>1986年发现于河南省商丘市永城县砀山 · 梁孝王之子梁共王刘买之墓</p>
  763. <br />
  764. <p>中部一条7米长巨龙飞腾,东朱雀,西白虎,四周由怪兽、灵芝及云气纹图案装饰。填补了我国西汉时期壁画的空白,比敦煌壁画要早600多年,被誉为“敦煌之前的敦煌”的四神云气图</p>`
  765. },
  766. {
  767. id: 2,
  768. name: '卜千秋墓中的升仙图',
  769. tit: '墓室壁画',
  770. txt: `
  771. <p>壁画长4.15米,宽0.32米</p>
  772. <br />
  773. <p>它“讲述”了西汉一对夫妇死后升仙的“故事”。“壁画距今已2000多年了,是国内发现最完整的西汉壁画,被学术界和文物考古界誉为“国宝级文物”。</p>`
  774. }
  775. // {
  776. // id: 3,
  777. // name: '汉代先民的神仙信仰',
  778. // tit: '墓室壁画',
  779. // txt: `
  780. // <p>资料待完善</p>`
  781. // }
  782. ],
  783. // 后厨备宴(静态资源目录位置:staticData/HH/chef)
  784. chef: {
  785. // 最后的过场动画路径+名字
  786. lastVideo: 'chef/end.mp4',
  787. // 初始背景图路径+名字
  788. baseImg: 'chef/bg.jpg',
  789. // 后厨群像图路径+名字
  790. houChuImg: 'chef/houChu.jpg',
  791. hot: [
  792. {
  793. // 热点名字
  794. name: '㓥猪',
  795. // 热点图片路径+名字
  796. imgSrc: 'chef/hot1.png',
  797. // 点击之后的播放动画路径+名字
  798. videoSrc: 'chef/1.mp4',
  799. // 里面展示的图片路径+名字
  800. showImg: 'chef/show1.png',
  801. // 里面展示的文本
  802. txt: `
  803. <p>将处理好的肉,按用途切割成条状、块状或薄片,</p>
  804. <p>且常依照礼制或饮食习惯进行处理。</p>
  805. `,
  806. // 热点定位百分比
  807. loc: {
  808. top: '71%',
  809. left: '9%'
  810. },
  811. // 点击热点之后放大的比例和位置
  812. change: 'scale(3) translate(278px, -107px)'
  813. },
  814. {
  815. // 热点名字
  816. name: '割肉',
  817. // 热点图片路径+名字
  818. imgSrc: 'chef/hot2.png',
  819. // 点击之后的播放动画路径+名字
  820. videoSrc: 'chef/2.mp4',
  821. // 里面展示的图片路径+名字
  822. showImg: 'chef/show2.png',
  823. // 里面展示的文本
  824. txt: `
  825. <p>割肉割肉将处理好的肉,按用途切割成条状、块状或薄片,</p>
  826. <p>且常依照礼制或饮食习惯进行处理。</p>
  827. `,
  828. // 热点定位百分比
  829. loc: {
  830. top: '68%',
  831. left: '44%'
  832. },
  833. // 点击热点之后放大的比例和位置
  834. change: 'scale(3) translate(44px, -90px)'
  835. },
  836. {
  837. // 热点名字
  838. name: '淘洗',
  839. // 热点图片路径+名字
  840. imgSrc: 'chef/hot3.png',
  841. // 点击之后的播放动画路径+名字
  842. videoSrc: 'chef/3.mp4',
  843. // 里面展示的图片路径+名字
  844. showImg: 'chef/show3.png',
  845. // 里面展示的文本
  846. txt: `
  847. <p>淘洗淘洗将处理好的肉,按用途切割成条状、块状或薄片,</p>
  848. <p>且常依照礼制或饮食习惯进行处理。</p>
  849. `,
  850. // 热点定位百分比
  851. loc: {
  852. top: '65%',
  853. left: '58%'
  854. },
  855. // 点击热点之后放大的比例和位置
  856. change: 'scale(3) translate(-90px, -70px)'
  857. },
  858. {
  859. // 热点名字
  860. name: '烧灶',
  861. // 热点图片路径+名字
  862. imgSrc: 'chef/hot4.png',
  863. // 点击之后的播放动画路径+名字
  864. videoSrc: 'chef/4.mp4',
  865. // 里面展示的图片路径+名字
  866. showImg: 'chef/show4.png',
  867. // 里面展示的文本
  868. txt: `
  869. <p>烧灶烧灶将处理好的肉,按用途切割成条状、块状或薄片,</p>
  870. <p>且常依照礼制或饮食习惯进行处理。</p>
  871. `,
  872. // 热点定位百分比
  873. loc: {
  874. top: '63%',
  875. left: '78%'
  876. },
  877. // 点击热点之后放大的比例和位置
  878. change: 'scale(3) translate(-248px, -70px)'
  879. }
  880. ]
  881. }
  882. }