Home.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600
  1. <template>
  2. <div class="home">
  3. <div class="main">
  4. <div class="mainCon" v-show="!oneTxt">
  5. <audio
  6. id="myAudio"
  7. v-if="audio"
  8. v-show="isOneAduio"
  9. :src="urlToFitFu(audio)"
  10. controls
  11. ></audio>
  12. <!-- 音频图标 v-if="audio && !isOneAduio"-->
  13. <div class="iconList">
  14. <div
  15. class="audioIcon"
  16. @click="audioSta = !audioSta"
  17. :title="audioSta ? '关闭音频' : '打开音频'"
  18. >
  19. <img
  20. :src="
  21. require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)
  22. "
  23. alt=""
  24. />
  25. </div>
  26. <div
  27. class="audioIcon"
  28. @click="audioSta = !audioSta"
  29. :title="audioSta ? '关闭音频' : '打开音频'"
  30. >
  31. <img
  32. :src="
  33. require(`@/assets/images/pc/yuyan.png`)
  34. "
  35. alt=""
  36. />
  37. </div>
  38. </div>
  39. <!-- 如果只有一个模块 -->
  40. <!-- <div
  41. class="oneTabNum"
  42. v-if="
  43. flooTab.length === 1 &&
  44. data[myType] &&
  45. data[myType].length &&
  46. data[myType].length > 1
  47. "
  48. >
  49. {{ myInd + 1 }} / {{ data[myType].length }}
  50. </div> -->
  51. <!-- 底部的tab -->
  52. <!-- <div class="flooTabBox" v-if="flooTab.length > 1">
  53. <div
  54. @click="myType = item.type"
  55. class="tabRow"
  56. :class="{ tabRowAc: myType === item.type }"
  57. v-for="item in flooTab"
  58. :key="item.id"
  59. >
  60. <img
  61. :src="
  62. require(`@/assets/images/pc/icon${item.id}${
  63. myType === item.type ? 'Ac' : ''
  64. }.png`)
  65. "
  66. alt=""
  67. />
  68. {{ item.name }}
  69. <span
  70. v-if="
  71. data[item.type] &&
  72. data[item.type].length &&
  73. data[item.type].length > 1
  74. "
  75. >{{ item.type === myType ? myInd + 1 + "/" : null
  76. }}{{ data[item.type].length }}</span
  77. >
  78. </div>
  79. </div> -->
  80. <!-- 主要内容 -->
  81. <div class="contenBoxMain">
  82. <img class="logo" src="../assets/logo.png" alt="" />
  83. <div
  84. class="contenBox"
  85. :class="{ contenBoxAc: index === myInd }"
  86. v-for="(item, index) in activeObj.images"
  87. :key="index"
  88. >
  89. <!-- 模型页面 -->
  90. <!-- <div class="modelBox" v-if="myType === 'model'">
  91. <iframe
  92. :src="urlToFitFu(item)"
  93. frameborder="0"
  94. v-if="index === myInd"
  95. ></iframe>
  96. </div> -->
  97. <!-- 视频页面 -->
  98. <!-- <div class="videoBox" v-else-if="myType === 'video'">
  99. <video
  100. controls
  101. :src="urlToFitFu(item.url)"
  102. v-if="index === myInd"
  103. ></video>
  104. </div> -->
  105. <!-- 图片页面 v-if="myType === 'img'"-->
  106. <div class="imgBox">
  107. <div class="smImgBox" @click="lookImg(urlToFitFu(item))">
  108. <img v-lazy="urlToFitFu(item)" alt="" />
  109. </div>
  110. </div>
  111. </div>
  112. <!-- 左右箭头 -->
  113. <div
  114. @click="cutMyInd(-1, myInd === 0)"
  115. class="leftJJ awccJJ"
  116. :class="{ noClick: myInd === 0 }"
  117. v-if="activeObj.images && activeObj.images.length > 1"
  118. ></div>
  119. <div
  120. @click="cutMyInd(1, myInd === activeObj.images.length - 1)"
  121. class="rightJJ awccJJ"
  122. :class="{ noClick: myInd === activeObj.images.length - 1 }"
  123. v-if="activeObj.images && activeObj.images.length > 1"
  124. ></div>
  125. </div>
  126. </div>
  127. <div class="changeList">
  128. <div class="list">
  129. <div class="item" @click="activeObj = element;myInd = 0" v-for="element in list" :key="element.title" :class="{active: element.id == activeObj.id}">
  130. {{ element.title }}
  131. </div>
  132. </div>
  133. </div>
  134. <!-- 下面的文字介绍 -->
  135. <div class="flooTxt" v-if="activeObj.images[myInd]">
  136. <div class="flooTxtBox">
  137. <div class="myTitle">{{ activeObj.images[myInd].title_zh }}</div>
  138. <div class="myTxt">
  139. {{ activeObj.images[myInd].text_zh }}
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. <!-- 查看图片 -->
  145. <viewer class="viewerCla" ref="viewer" :images="lookPics">
  146. <img :src="lookPics[0]" alt="" />
  147. </viewer>
  148. </div>
  149. </template>
  150. <script>
  151. import myData from "./data.json";
  152. export default {
  153. name: "Home",
  154. data() {
  155. return {
  156. m: this.$route.query.m,
  157. id: this.$route.query.id,
  158. // 音频地址
  159. audio: "",
  160. // 如果只有单独的音频
  161. isOneAduio: false,
  162. // 音频状态
  163. audioSta: false,
  164. myInd: 0,
  165. // 当前 type
  166. list: [],
  167. // 查看图片
  168. lookPics: [],
  169. activeObj: {
  170. id: 1,
  171. images: [],
  172. },
  173. };
  174. },
  175. watch: {
  176. myType() {
  177. this.myInd = 0;
  178. },
  179. // 音频的开启和关闭
  180. audioSta(val) {
  181. const dom = document.querySelector("#myAudio");
  182. if (val) {
  183. dom.play();
  184. dom.onended = () => {
  185. // console.log("----音频播放完毕");
  186. this.audioSta = false;
  187. };
  188. } else dom.pause();
  189. },
  190. },
  191. computed: {},
  192. components: {},
  193. methods: {
  194. // 本地化 url 适配
  195. urlToFitFu(url) {
  196. return url.url || url;
  197. // const resUrl = url;
  198. // if (url.includes("https://super.4dage.com")) {
  199. // return url.replace("https://super.4dage.com", "");
  200. // } else if (url.includes("http://super.4dage.com")) {
  201. // return url.replace("http://super.4dage.com", "");
  202. // } else return resUrl;
  203. },
  204. // 点击左右箭头
  205. cutMyInd(num, flag) {
  206. if (flag) return;
  207. this.myInd += num;
  208. this.activeObj = this.data[this.myType][this.myInd];
  209. console.log("----num", this.activeObj, "flag", flag, this.myInd);
  210. },
  211. // 点击查看大图
  212. lookImg(url) {
  213. let dom = this.$refs.viewer.$viewer;
  214. this.lookPics = [url.url || url];
  215. dom.show();
  216. },
  217. async getData() {
  218. console.log("----myData", myData);
  219. // https://www.4dmodel.com/
  220. // let url = `https://super.4dage.com/data/${ // 线上数据
  221. // let url = `/data/${
  222. // //本地化部署
  223. // this.id
  224. // }/hot/js/data.js?time=${Math.random()}`;
  225. // let url = `/hot/js/data.js?time=${Math.random()}`;
  226. // let result = (await this.$http.get(url)).data;
  227. const resData = myData;
  228. this.list = resData;
  229. let showData = resData && resData[0];
  230. this.activeObj = {
  231. ...showData,
  232. };
  233. },
  234. },
  235. mounted() {
  236. this.getData();
  237. },
  238. };
  239. </script>
  240. <style lang="less" scoped>
  241. .home {
  242. .viewerCla img {
  243. display: none;
  244. }
  245. width: 100%;
  246. height: 100%;
  247. background-color: rgba(255, 252, 247, 0.6);
  248. backdrop-filter: blur(10px);
  249. position: relative;
  250. #myAudio {
  251. z-index: 11;
  252. position: absolute;
  253. top: 50%;
  254. left: 50%;
  255. transform: translate(-50%, -50%);
  256. width: 500px;
  257. height: 60px;
  258. }
  259. .main {
  260. width: 1350px;
  261. margin: 0 auto;
  262. height: 825px;
  263. padding-top: 95px;
  264. .changeList {
  265. width: 630px;
  266. height: 32px;
  267. width: 630px;
  268. height: 32px;
  269. position: absolute;
  270. left: calc(50% - 315px);
  271. bottom: 286px;
  272. .list {
  273. display: flex;
  274. align-items: center;
  275. .active{
  276. opacity: 1;
  277. color: #02362C;
  278. }
  279. div {
  280. height: 100%;
  281. padding: 8px 7px 10px 7px;
  282. min-width: 70px;
  283. text-align: center;
  284. background: #dde5e2;
  285. border-radius: 7px;
  286. font-family: Source Han Serif CN;
  287. font-weight: 500;
  288. font-size: 14px;
  289. color: #02362c;
  290. line-height: 14px;
  291. opacity: 0.79;
  292. margin-right: 20px;
  293. }
  294. }
  295. }
  296. .mainCon {
  297. background-image: url("../assets/bg.png");
  298. background-size: 100% 100%;
  299. position: relative;
  300. border-radius: 6px;
  301. overflow: hidden;
  302. width: 100%;
  303. height: 100%;
  304. .iconList{
  305. position: absolute;
  306. bottom: 182px;
  307. right: 237px;
  308. display: flex;
  309. }
  310. .audioIcon {
  311. z-index: 10;
  312. cursor: pointer;
  313. position: relative;
  314. // right: 20px;
  315. // bottom: 278px;
  316. width: 62px;
  317. img {
  318. width: 100%;
  319. }
  320. }
  321. .oneTabNum {
  322. z-index: 10;
  323. position: absolute;
  324. bottom: 30px;
  325. left: 50%;
  326. transform: translateX(-50%);
  327. font-size: 14px;
  328. }
  329. .flooTabBox {
  330. z-index: 10;
  331. position: absolute;
  332. bottom: 30px;
  333. left: 50%;
  334. transform: translateX(-50%);
  335. display: flex;
  336. .tabRow {
  337. cursor: pointer;
  338. display: flex;
  339. align-items: center;
  340. margin: 0 12px;
  341. font-size: 12px;
  342. background-color: #dedede;
  343. padding: 0px 14px;
  344. height: 36px;
  345. border-radius: 18px;
  346. & > img {
  347. margin-right: 6px;
  348. }
  349. }
  350. .tabRowAc {
  351. background-color: #b90c0c;
  352. pointer-events: none;
  353. color: #d6b970;
  354. }
  355. }
  356. .contenBoxMain {
  357. position: relative;
  358. width: 100%;
  359. height: 100%;
  360. .logo {
  361. position: absolute;
  362. left: 52px;
  363. top: 37px;
  364. height: 60px;
  365. }
  366. }
  367. .contenBox {
  368. width: 630px;
  369. height: 355px;
  370. position: absolute;
  371. top: 123px;
  372. left: calc(50% - 315px);
  373. opacity: 0;
  374. pointer-events: none;
  375. transition: all 0.5s;
  376. .modelBox,
  377. .videoBox,
  378. .imgBox {
  379. width: 100%;
  380. height: 100%;
  381. object-fit: cover;
  382. }
  383. .modelBox {
  384. iframe {
  385. width: 100%;
  386. height: 100%;
  387. }
  388. }
  389. .videoBox {
  390. // padding: 100px 100px 120px;
  391. video {
  392. width: 100%;
  393. height: 100%;
  394. object-fit: cover;
  395. }
  396. }
  397. .imgBox {
  398. // padding: 100px 100px 120px;
  399. .smImgBox {
  400. width: 100%;
  401. height: 100%;
  402. cursor: zoom-in;
  403. & > img {
  404. pointer-events: none;
  405. width: 100%;
  406. height: 100%;
  407. object-fit: cover;
  408. }
  409. }
  410. }
  411. }
  412. .contenBoxAc {
  413. opacity: 1;
  414. pointer-events: auto;
  415. }
  416. .awccJJ {
  417. cursor: pointer;
  418. position: absolute;
  419. top: 42%;
  420. transform: translateY(-50%);
  421. left: 266px;
  422. width: 48px;
  423. height: 60px;
  424. background-image: url("../assets/images/icon/left.png");
  425. background-size: 100% 100%;
  426. &:focus {
  427. outline: none;
  428. }
  429. }
  430. .rightJJ {
  431. left: auto;
  432. right: 266px;
  433. background-image: url("../assets/images/icon/right.png");
  434. }
  435. .noClick {
  436. cursor: default;
  437. opacity: 0.4;
  438. }
  439. }
  440. .flooTxt {
  441. margin-top: 20px;
  442. width: 80%;
  443. height: 135px;
  444. margin: 0 auto;
  445. position: relative;
  446. top: -137px;
  447. .flooTxtBox {
  448. width: 100%;
  449. height: 100%;
  450. overflow-y: auto;
  451. .myTitle {
  452. color: #DDE5E2;
  453. font-size: 22px;
  454. font-weight: 700;
  455. margin-bottom: 10px;
  456. }
  457. .myTxt {
  458. font-family: Adobe Heiti Std;
  459. font-weight: normal;
  460. font-size: 19px;
  461. color: #DDE5E2;
  462. line-height: 31px;
  463. }
  464. &::-webkit-scrollbar {
  465. /*滚动条整体样式*/
  466. width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
  467. height: 1px;
  468. }
  469. &::-webkit-scrollbar-thumb {
  470. /*滚动条里面小方块*/
  471. border-radius: 10px;
  472. -webkit-box-shadow: inset 0 0 5px transparent;
  473. background: #b90c0c;
  474. }
  475. &::-webkit-scrollbar-track {
  476. /*滚动条里面轨道*/
  477. -webkit-box-shadow: inset 0 0 5px transparent;
  478. border-radius: 10px;
  479. background: transparent;
  480. }
  481. }
  482. }
  483. .flooTxtOne {
  484. height: 600px;
  485. }
  486. }
  487. }
  488. // 移动端
  489. @media screen and (max-width: 1000px) {
  490. .home {
  491. #myAudio {
  492. width: 90vw;
  493. max-width: 500px;
  494. }
  495. .main {
  496. width: 90%;
  497. height: 94%;
  498. padding: 0;
  499. position: absolute;
  500. top: 50%;
  501. left: 50%;
  502. transform: translate(-50%, -50%);
  503. .mainCon {
  504. border-radius: 8px 8px 0 0;
  505. .audioIcon {
  506. cursor: default;
  507. right: auto;
  508. bottom: auto;
  509. top: 6px;
  510. left: 6px;
  511. & > img {
  512. width: 30px;
  513. }
  514. }
  515. .flooTabBox {
  516. width: 100%;
  517. bottom: 20px;
  518. justify-content: center;
  519. .tabRow {
  520. cursor: default;
  521. margin: 0 6px;
  522. padding: 0 10px;
  523. height: 32px;
  524. & > img {
  525. width: 16px;
  526. }
  527. }
  528. }
  529. .contenBox {
  530. .videoBox {
  531. padding: 0px 0;
  532. position: relative;
  533. video {
  534. width: 96%;
  535. max-height: 100%;
  536. height: auto;
  537. position: absolute;
  538. top: 50%;
  539. left: 2%;
  540. transform: translateY(-50%);
  541. }
  542. }
  543. .imgBox {
  544. padding: 60px 50px 80px;
  545. .smImgBox {
  546. cursor: default;
  547. }
  548. }
  549. }
  550. .awccJJ {
  551. left: 0;
  552. width: 28px;
  553. height: 57px;
  554. cursor: default;
  555. background-image: url("../assets/images/pc/icon-left.png");
  556. }
  557. .rightJJ {
  558. left: auto;
  559. right: 0;
  560. background-image: url("../assets/images/pc/icon-right.png");
  561. }
  562. }
  563. .flooTxt {
  564. margin-top: 0;
  565. padding: 20px 15px 15px;
  566. height: 200px;
  567. background-color: #fff;
  568. border-radius: 0 0 8px 8px;
  569. .flooTxtBox {
  570. .myTitle {
  571. font-size: 18px;
  572. }
  573. .myTxt {
  574. font-size: 14px;
  575. line-height: 22px;
  576. }
  577. }
  578. }
  579. .flooTxtOne {
  580. height: 100%;
  581. }
  582. }
  583. }
  584. }
  585. </style>