myData.js 32 KB

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