2 years ago · f7536c2c4e
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
 
																+> 1%
															
 
																+last 2 versions
															
 
																+not dead
															
--- a/.env.dev
+++ b/.env.dev
@@ -0,0 +1,4 @@
 
																+CLI_MODE=dev

															
 
																+NODE_ENV=development

															
 
																+PUBLIC_PATH=./

															
 
																+VUE_APP_G_PREFIX=https://super.4dage.com/

															
--- a/.env.localdeploy
+++ b/.env.localdeploy
@@ -0,0 +1,4 @@
 
																+CLI_MODE=local
															
 
																+NODE_ENV=production
															
 
																+VUE_APP_PUBLIC_PATH=./
															
 
																+VUE_APP_G_PREFIX=http://127.0.0.1:8085/
															
--- a/.env.test
+++ b/.env.test
@@ -0,0 +1,4 @@
 
																+CLI_MODE=test

															
 
																+NODE_ENV=production

															
 
																+PUBLIC_PATH=./

															
 
																+VUE_APP_G_PREFIX=https://super.4dage.com/

															
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,57 @@
 
																+// ESLint 检查 .vue 文件需要单独配置编辑器：
															
 
																+// https://eslint.vuejs.org/user-guide/#editor-integrations
															
 
																+module.exports = {
															
 
																+  root: true,
															
 
																+  env: {
															
 
																+    browser: true,
															
 
																+    commonjs: true,
															
 
																+    es6: true,
															
 
																+    jest: true,
															
 
																+    jquery: true,
															
 
																+    node: true,
															
 
																+  },
															
 
																+  'extends': [
															
 
																+    'eslint:recommended',
															
 
																+    // "plugin:vue/base",
															
 
																+    'plugin:vue/recommended',
															
 
																+  ],
															
 
																+  parserOptions: {
															
 
																+    parser: 'babel-eslint'
															
 
																+    // "parser": "@babel/eslint-parser"
															
 
																+  },
															
 
																+  rules: {
															
 
																+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
															
 
																+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
															
 
																+    'semi': ['error', 'never'],
															
 
																+    "no-unused-vars": ["warn", {
															
 
																+      "vars": "all",
															
 
																+      "args": "after-used",
															
 
																+      "ignoreRestSiblings": false
															
 
																+    }],
															
 
																+    "keyword-spacing": ["error", { "before": true, "after": true }],
															
 
																+    "object-curly-spacing": ["error", "always"],
															
 
																+    "space-infix-ops": ["error"],
															
 
																+    'key-spacing': ["error", {
															
 
																+      "mode": "strict"
															
 
																+    }],
															
 
																+    "comma-spacing": ["error", { "before": false, "after": true }],
															
 
																+    "func-call-spacing": ["error", "never"],
															
 
																+    "semi-spacing": ["error", { "before": false, "after": true }],
															
 
																+    "space-before-blocks": ["error", "always"],
															
 
																+    'no-trailing-spaces': 'error',
															
 
																+    'no-multi-spaces': 'error',
															
 
																+    "indent": ["error", 2],
															
 
																+    'no-empty': 'off',
															
 
																+    // 默认不启用：为了避免细微的 bug，最好直接从 Object.prototype 调用挂载于prototype上的方法方法。例如，foo.hasOwnProperty("bar") 应该替换为 Object.prototype.hasOwnProperty.call(foo, "bar")。
															
 
																+    'no-prototype-builtins': "off",
															
 
																+  },
															
 
																+  globals: {
															
 
																+    api: true,
															
 
																+    config: true,
															
 
																+    mapState: true,
															
 
																+    mapGetters: true,
															
 
																+    mapMutations: true,
															
 
																+    store: true,
															
 
																+    utils: true,
															
 
																+  }
															
 
																+}
															
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
 
																+.DS_Store
															
 
																+node_modules
															
 
																+/dist
															
 
																+
															
 
																+
															
 
																+# local env files
															
 
																+.env.local
															
 
																+.env.*.local
															
 
																+
															
 
																+# Log files
															
 
																+npm-debug.log*
															
 
																+yarn-debug.log*
															
 
																+yarn-error.log*
															
 
																+pnpm-debug.log*
															
 
																+
															
 
																+# Editor directories and files
															
 
																+.idea
															
 
																+.vscode
															
 
																+*.suo
															
 
																+*.ntvs*
															
 
																+*.njsproj
															
 
																+*.sln
															
 
																+*.sw?
															
--- a/README.md
+++ b/README.md
@@ -0,0 +1,2 @@
 
																+# 测试环境部署地址
															
 
																+阿里云-4dkk-culture/华南1（深圳）/XuzhouHanStoneReliefArtMuseum/hotspot/
															
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
 
																+module.exports = {
															
 
																+  presets: [
															
 
																+    '@vue/cli-plugin-babel/preset'
															
 
																+  ]
															
 
																+}
															
--- a/package.json
+++ b/package.json
@@ -0,0 +1,40 @@
 
																+{
															
 
																+  "name": "hotspot",
															
 
																+  "version": "0.1.0",
															
 
																+  "private": true,
															
 
																+  "scripts": {
															
 
																+    "serve": "vue-cli-service serve --mode dev",
															
 
																+    "build-test": "vue-cli-service build --mode test",
															
 
																+    "build-local-deploy": "vue-cli-service build --mode localdeploy",
															
 
																+    "build": "vue-cli-service build",
															
 
																+    "lint": "vue-cli-service lint"
															
 
																+  },
															
 
																+  "dependencies": {
															
 
																+    "axios": "^1.1.3",
															
 
																+    "core-js": "^3.8.3",
															
 
																+    "element-ui": "^2.15.6",
															
 
																+    "html2canvas": "^1.3.3",
															
 
																+    "install": "^0.13.0",
															
 
																+    "swiper": "^9.0.3",
															
 
																+    "v-viewer": "^1.6.4",
															
 
																+    "vue-lazyload": "^1.3.3",
															
 
																+    "vue-router": "^3.5.1",
															
 
																+    "vue": "^2.6.14",
															
 
																+    "vuex": "^3.6.2"
															
 
																+  },
															
 
																+  "devDependencies": {
															
 
																+    "@babel/core": "^7.12.16",
															
 
																+    "@babel/eslint-parser": "^7.12.16",
															
 
																+    "@vue/cli-plugin-babel": "~5.0.0",
															
 
																+    "@vue/cli-plugin-eslint": "~5.0.0",
															
 
																+    "@vue/cli-plugin-router": "~5.0.0",
															
 
																+    "@vue/cli-plugin-vuex": "~5.0.0",
															
 
																+    "@vue/cli-service": "~5.0.0",
															
 
																+    "babel-eslint": "^10.1.0",
															
 
																+    "eslint-plugin-vue": "^8.0.3",
															
 
																+    "eslint": "^7.32.0",
															
 
																+    "less-loader": "^5.0.0",
															
 
																+    "less": "^3.0.4",
															
 
																+    "vue-template-compiler": "^2.6.14"
															
 
																+  }
															
 
																+}
															
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,16 @@
 
																+<!DOCTYPE html>
															
 
																+<html lang="en">
															
 
																+  <head>
															
 
																+    <meta charset="utf-8">
															
 
																+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
															
 
																+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
															
 
																+    <title><%= htmlWebpackPlugin.options.title %></title>
															
 
																+  </head>
															
 
																+  <body>
															
 
																+    <noscript>
															
 
																+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
															
 
																+    </noscript>
															
 
																+    <div id="app"></div>
															
 
																+    <!-- built files will be auto injected -->
															
 
																+  </body>
															
 
																+</html>
															
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,39 @@
 
																+<template>
															
 
																+  <div id="app">
															
 
																+    <router-view />
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<style lang="less">
															
 
																+html,body{
															
 
																+  width: 100%;
															
 
																+  height: 100%;
															
 
																+  overflow: hidden;
															
 
																+}
															
 
																+body {
															
 
																+	::-webkit-scrollbar { width: 5px; height: 5px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
															
 
																+	::-webkit-scrollbar-thumb { background: #930909; border-radius: 2.5px;}
															
 
																+	::-webkit-scrollbar-button { display: none; }
															
 
																+	::-webkit-scrollbar-track { background: gray; border-radius: 2.5px;}
															
 
																+  // 横竖滚动条轨道交汇处
															
 
																+  ::-webkit-scrollbar-corner { background: transparent; }
															
 
																+  // 有必要给resizer设置border_radius吗？
															
 
																+	::-webkit-scrollbar-resizer { background: transparent; }
															
 
																+}
															
 
																+*{
															
 
																+  margin: 0;
															
 
																+  padding: 0;
															
 
																+}
															
 
																+#app {
															
 
																+  width: 100%;
															
 
																+  height: 100%;
															
 
																+}
															
 
																+@font-face {
															
 
																+  font-family: 'DFLiShuW7';
															
 
																+  src: url('@/assets/style/DFLiShuW7.ttf');
															
 
																+}
															
 
																+@font-face {
															
 
																+  font-family: 'Adobe Heiti Std';
															
 
																+  src: url('@/assets/style/Adobe Heiti Std.otf');
															
 
																+}
															
 
																+</style>
															
--- a/src/assets/images/IMGerror.png
+++ b/src/assets/images/IMGerror.png
--- a/src/assets/images/arrow-left.png
+++ b/src/assets/images/arrow-left.png
--- a/src/assets/images/arrow-right.png
+++ b/src/assets/images/arrow-right.png
--- a/src/assets/images/audio-icon.png
+++ b/src/assets/images/audio-icon.png
--- a/src/assets/images/bg-audio-mobile-muted.png
+++ b/src/assets/images/bg-audio-mobile-muted.png
--- a/src/assets/images/bg-audio-mobile.png
+++ b/src/assets/images/bg-audio-mobile.png
--- a/src/assets/images/bg-audio-muted.png
+++ b/src/assets/images/bg-audio-muted.png
--- a/src/assets/images/bg-audio.png
+++ b/src/assets/images/bg-audio.png
--- a/src/assets/images/bg-mobile.png
+++ b/src/assets/images/bg-mobile.png
--- a/src/assets/images/bg.png
+++ b/src/assets/images/bg.png
--- a/src/assets/images/close-thin.png
+++ b/src/assets/images/close-thin.png
--- a/src/assets/images/close.png
+++ b/src/assets/images/close.png
--- a/src/assets/images/code2d.png
+++ b/src/assets/images/code2d.png
--- a/src/assets/images/iframe-icon.png
+++ b/src/assets/images/iframe-icon.png
--- a/src/assets/images/img-icon.png
+++ b/src/assets/images/img-icon.png
--- a/src/assets/images/like-mobile.png
+++ b/src/assets/images/like-mobile.png
--- a/src/assets/images/like.png
+++ b/src/assets/images/like.png
--- a/src/assets/images/loading.gif
+++ b/src/assets/images/loading.gif
--- a/src/assets/images/model-icon.png
+++ b/src/assets/images/model-icon.png
--- a/src/assets/images/share-mobile.png
+++ b/src/assets/images/share-mobile.png
--- a/src/assets/images/share-tip.png
+++ b/src/assets/images/share-tip.png
--- a/src/assets/images/share.png
+++ b/src/assets/images/share.png
--- a/src/assets/images/title-bottom-line.png
+++ b/src/assets/images/title-bottom-line.png
--- a/src/assets/images/txt-icon.png
+++ b/src/assets/images/txt-icon.png
--- a/src/assets/images/video-icon.png
+++ b/src/assets/images/video-icon.png
--- a/src/assets/style/Adobe
+++ b/src/assets/style/Adobe
--- a/src/assets/style/DFLiShuW7.ttf
+++ b/src/assets/style/DFLiShuW7.ttf
--- a/src/assets/style/my-reset.css
+++ b/src/assets/style/my-reset.css
@@ -0,0 +1,60 @@
 
																+*,

															
 
																+*::before,

															
 
																+*::after {

															
 
																+  /* 阻止safari在用户交互设置一些元素的背景色 */

															
 
																+  -webkit-tap-highlight-color: transparent;

															
 
																+  box-sizing: border-box;

															
 
																+}

															
 
																+

															
 
																+html {

															
 
																+  overflow: hidden;

															
 
																+  touch-action: none;

															
 
																+  scroll-behavior: smooth; /* MDN: When this property is specified on the root element, it applies to the viewport instead. This property specified on the body element will not propagate to the viewport.(???) */

															
 
																+  height: 100%;

															
 
																+}

															
 
																+

															
 
																+body {

															
 
																+  text-align: justify;

															
 
																+  height: 100%;

															
 
																+  overflow: hidden;

															
 
																+}

															
 
																+

															
 
																+a {

															
 
																+  color: initial;

															
 
																+  text-decoration: initial;

															
 
																+  outline: none;

															
 
																+}

															
 
																+

															
 
																+button {

															
 
																+  padding: 0;

															
 
																+  cursor: pointer;

															
 
																+  background-color: initial;

															
 
																+  border: initial;

															
 
																+  outline: none;

															
 
																+  white-space: pre;

															
 
																+}

															
 
																+

															
 
																+img {

															
 
																+  user-select: none;

															
 
																+}

															
 
																+

															
 
																+menu {

															
 
																+  list-style-type: initial;

															
 
																+}

															
 
																+

															
 
																+li {

															
 
																+  display: initial;

															
 
																+}

															
 
																+

															
 
																+input {

															
 
																+  outline: initial;

															
 
																+  background: initial;

															
 
																+  border: initial;

															
 
																+  border-radius: initial;

															
 
																+  width: initial;

															
 
																+  height: initial;

															
 
																+}

															
 
																+

															
 
																+td {

															
 
																+  vertical-align: inherit;

															
 
																+}
															
--- a/src/assets/style/reset.css
+++ b/src/assets/style/reset.css
@@ -0,0 +1,48 @@
 
																+/* http://meyerweb.com/eric/tools/css/reset/ 

															
 
																+   v2.0 | 20110126

															
 
																+   License: none (public domain)

															
 
																+*/

															
 
																+

															
 
																+html, body, div, span, applet, object, iframe,

															
 
																+h1, h2, h3, h4, h5, h6, p, blockquote, pre,

															
 
																+a, abbr, acronym, address, big, cite, code,

															
 
																+del, dfn, em, img, ins, kbd, q, s, samp,

															
 
																+small, strike, strong, sub, sup, tt, var,

															
 
																+b, u, i, center,

															
 
																+dl, dt, dd, ol, ul, li,

															
 
																+fieldset, form, label, legend,

															
 
																+table, caption, tbody, tfoot, thead, tr, th, td,

															
 
																+article, aside, canvas, details, embed, 

															
 
																+figure, figcaption, footer, header, hgroup, 

															
 
																+menu, nav, output, ruby, section, summary,

															
 
																+time, mark, audio, video {

															
 
																+	margin: 0;

															
 
																+	padding: 0;

															
 
																+	border: 0;

															
 
																+	font-size: 100%;

															
 
																+	font: inherit;

															
 
																+	vertical-align: baseline;

															
 
																+}

															
 
																+/* HTML5 display-role reset for older browsers */

															
 
																+article, aside, details, figcaption, figure, 

															
 
																+footer, header, hgroup, menu, nav, section {

															
 
																+	display: block;

															
 
																+}

															
 
																+body {

															
 
																+	line-height: 1;

															
 
																+}

															
 
																+ol, ul {

															
 
																+	list-style: none;

															
 
																+}

															
 
																+blockquote, q {

															
 
																+	quotes: none;

															
 
																+}

															
 
																+blockquote:before, blockquote:after,

															
 
																+q:before, q:after {

															
 
																+	content: '';

															
 
																+	content: none;

															
 
																+}

															
 
																+table {

															
 
																+	border-collapse: collapse;

															
 
																+	border-spacing: 0;

															
 
																+}
															
--- a/src/directives/v-click-outside.js
+++ b/src/directives/v-click-outside.js
@@ -0,0 +1,28 @@
 
																+export default {

															
 
																+  install(Vue) {

															
 
																+    Vue.directive('click-outside', {

															
 
																+      bind(el, binding) {

															
 
																+        function documentHandler(e) {

															
 
																+          if (el.contains(e.target)) {

															
 
																+            return false

															
 
																+          }

															
 
																+          if (binding.expression) {

															
 
																+            binding.value(e)

															
 
																+          }

															
 
																+        }

															
 
																+        el.__vueClickOutside__ = documentHandler

															
 
																+        if (binding.modifiers.click) {

															
 
																+          document.addEventListener('click', documentHandler)

															
 
																+        }

															
 
																+        if (binding.modifiers.mousedown) {

															
 
																+          document.addEventListener('mousedown', documentHandler)

															
 
																+        }

															
 
																+      },

															
 
																+      unbind(el) {

															
 
																+        document.removeEventListener('click', el.__vueClickOutside__)

															
 
																+        document.removeEventListener('mousedown', el.__vueClickOutside__)

															
 
																+        delete el.__vueClickOutside__

															
 
																+      }

															
 
																+    })

															
 
																+  }

															
 
																+}
															
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,31 @@
 
																+import "@/assets/style/reset.css"
															
 
																+import "@/assets/style/my-reset.css"
															
 
																+import Vue from 'vue'
															
 
																+import App from './App.vue'
															
 
																+import router from './router'
															
 
																+import axios from 'axios'
															
 
																+import 'viewerjs/dist/viewer.css'
															
 
																+import Viewer from 'v-viewer'
															
 
																+import VueLazyLoad from 'vue-lazyload'
															
 
																+import clickOutside from "@/directives/v-click-outside.js"
															
 
																+
															
 
																+// 禁用上下文菜单
															
 
																+document.oncontextmenu = function(e) {
															
 
																+  e.preventDefault()
															
 
																+}
															
 
																+
															
 
																+Vue.use(VueLazyLoad, {
															
 
																+  error: require('@/assets/images/IMGerror.png'),
															
 
																+  loading: require('@/assets/images/loading.gif')
															
 
																+})
															
 
																+Vue.use(Viewer)
															
 
																+Vue.use(clickOutside)
															
 
																+
															
 
																+Vue.config.productionTip = false
															
 
																+Vue.prototype.$http = axios
															
 
																+
															
 
																+
															
 
																+new Vue({
															
 
																+  router,
															
 
																+  render: h => h(App)
															
 
																+}).$mount('#app')
															
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,31 @@
 
																+import Vue from 'vue'
															
 
																+import VueRouter from 'vue-router'
															
 
																+// import Home from '../views/Home.vue'
															
 
																+import HomeWeb from '../views/HomeWeb.vue'
															
 
																+import HomeMobile from '../views/HomeMobile.vue'
															
 
																+
															
 
																+Vue.use(VueRouter)
															
 
																+
															
 
																+const routes = [
															
 
																+  // {
															
 
																+  //   path: '/',
															
 
																+  //   name: 'Home',
															
 
																+  //   component: Home
															
 
																+  // },
															
 
																+  {
															
 
																+    path: '/web',
															
 
																+    name: 'HomeWeb',
															
 
																+    component: HomeWeb
															
 
																+  },
															
 
																+  {
															
 
																+    path: '/mobile',
															
 
																+    name: 'HomeMobile',
															
 
																+    component: HomeMobile
															
 
																+  },
															
 
																+]
															
 
																+
															
 
																+const router = new VueRouter({
															
 
																+  routes
															
 
																+})
															
 
																+
															
 
																+export default router
															
--- a/src/utils/browser.js
+++ b/src/utils/browser.js
@@ -0,0 +1,29 @@
 
																+function versions () {
															
 
																+  var u = window.navigator.userAgent
															
 
																+  return {
															
 
																+    // IE内核
															
 
																+    trident: u.indexOf('Trident') > -1,
															
 
																+    // opera内核
															
 
																+    presto: u.indexOf('Presto') > -1,
															
 
																+    // 苹果、谷歌内核
															
 
																+    webKit: u.indexOf('AppleWebKit') > -1,
															
 
																+    // 火狐内核
															
 
																+    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1,
															
 
																+    // 是否为移动终端 / Tablets use desktop version
															
 
																+    mobile: (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) && !(/Tablet|iPad/i.test(navigator.userAgent)),
															
 
																+    // ios终端
															
 
																+    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
															
 
																+    // android终端或者uc浏览器
															
 
																+    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
															
 
																+    // 是否为iPhone或者安卓QQ浏览器
															
 
																+    iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
															
 
																+    // 是否为iPad
															
 
																+    iPad: u.indexOf('iPad') > -1,
															
 
																+    // 是否为web应用程序，没有头部与底部
															
 
																+    webApp: u.indexOf('Safari') === -1,
															
 
																+    // 是否为微信浏览器
															
 
																+    weixin: ~u.indexOf('MicroMessenger')
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+export default versions()
															
--- a/src/utils/other.js
+++ b/src/utils/other.js
@@ -0,0 +1,26 @@
 
																+export function deepProcess(obj, detailWork) {

															
 
																+  if (obj === null || obj === undefined) {

															
 
																+    return

															
 
																+  }

															
 
																+

															
 
																+  if (Array.isArray(obj)) {

															
 
																+    for (let index = 0; index < obj.length; index++) {

															
 
																+      const element = obj[index]

															
 
																+      if (typeof element === 'string') {

															
 
																+        obj[index] = detailWork(element)

															
 
																+      } else if (typeof element === 'object') {

															
 
																+        deepProcess(element, detailWork)

															
 
																+      }

															
 
																+    }

															
 
																+  } else if (typeof obj === 'object') {

															
 
																+    for (const key in obj) {

															
 
																+      if (Object.hasOwnProperty.call(obj, key)) {

															
 
																+        if (typeof obj[key] === 'string') {

															
 
																+          obj[key] = detailWork(obj[key])

															
 
																+        } else if (typeof obj[key] === 'object') {

															
 
																+          deepProcess(obj[key], detailWork)

															
 
																+        }

															
 
																+      }

															
 
																+    }

															
 
																+  }

															
 
																+}
															
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -0,0 +1,642 @@
 
																+<template>
															
 
																+  <!-- @click="autoplay" @touchstart="autoplay" -->
															
 
																+  <div class="home">
															
 
																+    <audio
															
 
																+      v-if="audio"
															
 
																+      id="audio1"
															
 
																+      ref="musicBg"
															
 
																+      class="audio"
															
 
																+      :src="audio"
															
 
																+      preload
															
 
																+      @ended="overAudio"
															
 
																+    />
															
 
																+    <div
															
 
																+      v-if="(!audio && fixIcon.length > 0) || (audio && fixIcon.length > 1)"
															
 
																+      class="content"
															
 
																+      :class="{ isMobileCon: isMobile }"
															
 
																+    >
															
 
																+      <div
															
 
																+        v-if="!isMobile && lengthShow"
															
 
																+        class="swiper-button-prev"
															
 
																+        @click="slideto('slidePrev')"
															
 
																+      />
															
 
																+      <div
															
 
																+        v-show="active === 'title' && isMobile"
															
 
																+        class="mb-intro"
															
 
																+      >
															
 
																+        <p v-html="data.title" />
															
 
																+        <p v-html="data.content" />
															
 
																+        <p
															
 
																+          v-if="
															
 
																+            data.imagesDesc && data.imagesDesc[myInd] && active === 'images'
															
 
																+          "
															
 
																+          v-html="data.imagesDesc[myInd]"
															
 
																+        />
															
 
																+        <p
															
 
																+          v-if="data.videosDesc && data.videosDesc[myInd] && active === 'video'"
															
 
																+          v-html="data.videosDesc[myInd]"
															
 
																+        />
															
 
																+      </div>
															
 
																+      <!-- 查看图片 -->
															
 
																+      <viewer
															
 
																+        ref="viewer"
															
 
																+        class="viewerCla"
															
 
																+        :images="lookPics"
															
 
																+      >
															
 
																+        <img
															
 
																+          :src="lookPics[0]"
															
 
																+          alt=""
															
 
																+        >
															
 
																+      </viewer>
															
 
																+
															
 
																+      <swiper
															
 
																+        v-show="active !== 'title'"
															
 
																+        ref="mySwiper"
															
 
																+        class="warpper"
															
 
																+        :options="swiperOptions"
															
 
																+      >
															
 
																+        <swiper-slide
															
 
																+          v-for="(item, i) in data[active]"
															
 
																+          :key="i"
															
 
																+        >
															
 
																+          <div class="slide">
															
 
																+            <img
															
 
																+              v-if="active === 'images'"
															
 
																+              v-lazy="fixUrl(item)"
															
 
																+              style="cursor: pointer"
															
 
																+              alt=""
															
 
																+              @click="lookImg(fixUrl(item))"
															
 
																+            >
															
 
																+            <video
															
 
																+              v-else-if="active === 'video'"
															
 
																+              class="videoDom"
															
 
																+              :src="fixUrl(item.url)"
															
 
																+              controls
															
 
																+            />
															
 
																+            <iframe
															
 
																+              v-else-if="active === 'model' || active === 'iframe'"
															
 
																+              :src="fixUrl(item)"
															
 
																+              frameborder="0"
															
 
																+              @click="colseParent(item)"
															
 
																+            />
															
 
																+          </div>
															
 
																+        </swiper-slide>
															
 
																+        <div
															
 
																+          v-show="lengthShow"
															
 
																+          slot="pagination"
															
 
																+          class="swiper-pagination"
															
 
																+        />
															
 
																+      </swiper>
															
 
																+      <div
															
 
																+        v-if="!isMobile && lengthShow"
															
 
																+        class="swiper-button-next"
															
 
																+        @click="slideto('slideNext')"
															
 
																+      />
															
 
																+    </div>
															
 
																+    <ul
															
 
																+      v-if="fixIcon.length > 0"
															
 
																+      class="iconarr"
															
 
																+      :class="{ oneChuMusic: fixIcon.length === 1 && !audio }"
															
 
																+    >
															
 
																+      <li
															
 
																+        v-for="(item, i) in fixIcon"
															
 
																+        :key="i"
															
 
																+        :class="{
															
 
																+          active: item.id === active || item.audioAc,
															
 
																+          onlyTxt: audio && fixIcon.length === 2 && i !== 0,
															
 
																+        }"
															
 
																+        @click="changeActive(item.id, item.audioAc)"
															
 
																+      >
															
 
																+        <img
															
 
																+          :src="require(`@/assets/images/${item.img}.png`)"
															
 
																+          alt=""
															
 
																+        >
															
 
																+        <span>{{ item.name }}</span>
															
 
																+      </li>
															
 
																+    </ul>
															
 
																+    <!-- 文字解说 -->
															
 
																+    <div
															
 
																+      v-if="!isMobile || (isMobile && fixIcon.length <= 0)"
															
 
																+      class="intro"
															
 
																+      :class="{
															
 
																+        ismtop:
															
 
																+          (!audio && fixIcon.length === 0) || (audio && fixIcon.length === 1),
															
 
																+      }"
															
 
																+    >
															
 
																+      <h3 v-html="data.title" />
															
 
																+      <p v-html="data.content" />
															
 
																+      <p
															
 
																+        v-if="data.imagesDesc && data.imagesDesc[myInd] && active === 'images'"
															
 
																+        v-html="data.imagesDesc[myInd]"
															
 
																+      />
															
 
																+      <p
															
 
																+        v-if="data.videosDesc && data.videosDesc[myInd] && active === 'video'"
															
 
																+        v-html="data.videosDesc[myInd]"
															
 
																+      />
															
 
																+    </div>
															
 
																+  </div>
															
 
																+</template>
															
 
																+
															
 
																+<script>
															
 
																+import { Swiper, SwiperSlide } from "vue-awesome-swiper"
															
 
																+import "swiper/css/swiper.css"
															
 
																+import browser from "@/utils/browser"
															
 
																+
															
 
																+let iconArr = [
															
 
																+  {
															
 
																+    name: "音频",
															
 
																+    id: "audio",
															
 
																+    img: "audio-icon",
															
 
																+    display: false,
															
 
																+    audioAc: false,
															
 
																+  },
															
 
																+  { name: "图片", id: "images", img: "img-icon", display: false },
															
 
																+  { name: "视频", id: "video", img: "video-icon", display: false },
															
 
																+  { name: "网页", id: "iframe", img: "iframe-icon", display: false },
															
 
																+  { name: "模型", id: "model", img: "model-icon", display: false },
															
 
																+]
															
 
																+
															
 
																+browser.mobile &&
															
 
																+  iconArr.push({ name: "介绍", id: "title", img: "txt-icon", display: false })
															
 
																+
															
 
																+export default {
															
 
																+  name: "Home",
															
 
																+  components: {
															
 
																+    Swiper,
															
 
																+    SwiperSlide,
															
 
																+  },
															
 
																+  data() {
															
 
																+    return {
															
 
																+      lookPics: [],
															
 
																+
															
 
																+      // 图片描述的索引
															
 
																+      myInd: 0,
															
 
																+      lengthShow: false,
															
 
																+      //  看看是不是只有一张图，一个视频或irm，只有一张图的时候隐藏左右按钮和小圆点
															
 
																+      audio: "",
															
 
																+      m: this.$route.query.m,
															
 
																+      id: this.$route.query.id,
															
 
																+      isMobile: browser.mobile,
															
 
																+      isAndriod: browser.android,
															
 
																+      swiperOptions: browser.mobile
															
 
																+        ? {
															
 
																+          pagination: {
															
 
																+            el: ".swiper-pagination",
															
 
																+            clickable: true,
															
 
																+          },
															
 
																+          on: {
															
 
																+            slideChangeTransitionEnd: () => {
															
 
																+              let swiper = this.$refs.mySwiper.$swiper
															
 
																+              let activeIndex = swiper.activeIndex
															
 
																+              this.myInd = activeIndex
															
 
																+            },
															
 
																+          },
															
 
																+        }
															
 
																+        : {
															
 
																+          slidesPerView: 3,
															
 
																+          spaceBetween: 0,
															
 
																+          centeredSlides: true,
															
 
																+          pagination: {
															
 
																+            el: ".swiper-pagination",
															
 
																+            clickable: true,
															
 
																+          },
															
 
																+          on: {
															
 
																+            slideChangeTransitionEnd: () => {
															
 
																+              let swiper = this.$refs.mySwiper.$swiper
															
 
																+              let activeIndex = swiper.activeIndex
															
 
																+              this.myInd = activeIndex
															
 
																+            },
															
 
																+          },
															
 
																+        },
															
 
																+      data: {},
															
 
																+      iconArr,
															
 
																+      active: "",
															
 
																+    }
															
 
																+  },
															
 
																+  computed: {
															
 
																+    swiper() {
															
 
																+      return this.$refs.mySwiper.$swiper
															
 
																+    },
															
 
																+    fixIcon() {
															
 
																+      let arr = this.iconArr.filter((item) => !!item.display)
															
 
																+      return arr
															
 
																+    },
															
 
																+  },
															
 
																+  watch: {
															
 
																+    myInd: {
															
 
																+      handler(newv) {
															
 
																+        this.$nextTick(() => {
															
 
																+          setTimeout(() => {
															
 
																+            if (this.active == "video") {
															
 
																+              // 控制当前选中的视频播放
															
 
																+              let videoDoms = document.querySelectorAll(".videoDom")
															
 
																+              videoDoms.forEach((v, i) => {
															
 
																+                if (i === newv) v.play()
															
 
																+                else v.pause()
															
 
																+              })
															
 
																+            }
															
 
																+          }, 500)
															
 
																+        })
															
 
																+      },
															
 
																+      immediate: true,
															
 
																+    },
															
 
																+
															
 
																+    active(newVal) {
															
 
																+      let AcDataLength = this.data[newVal].length - 1
															
 
																+      if (this.myInd > AcDataLength) this.myInd = AcDataLength
															
 
																+
															
 
																+      // 判断是否只有一张图片或者视频，ifrm   lengthShow
															
 
																+      let tempType = this.data[newVal]
															
 
																+      if (tempType && tempType.length && tempType.length > 1)
															
 
																+        this.lengthShow = true
															
 
																+      else this.lengthShow = false
															
 
																+      if (!newVal) {
															
 
																+        return
															
 
																+      }
															
 
																+      if (!this.$refs.musicBg) {
															
 
																+        return
															
 
																+      }
															
 
																+      // 如果点击的是音频
															
 
																+      setTimeout(() => {
															
 
																+        if (newVal == "video") {
															
 
																+          this.audioAc(false)
															
 
																+          if (!this.$refs.musicBg.paused) {
															
 
																+            this.$refs.musicBg.pause()
															
 
																+          }
															
 
																+        }
															
 
																+        // 控制当前选中的视频播放
															
 
																+        let videoDoms = document.querySelectorAll(".videoDom")
															
 
																+        videoDoms.forEach((v, i) => {
															
 
																+          if (i === this.myInd) v.play()
															
 
																+          else v.pause()
															
 
																+        })
															
 
																+      }, 500)
															
 
																+    },
															
 
																+  },
															
 
																+  mounted() {
															
 
																+    this.getData()
															
 
																+    document.addEventListener(
															
 
																+      "WeixinJSBridgeReady",
															
 
																+      () => {
															
 
																+        this.autoplay()
															
 
																+      },
															
 
																+      false
															
 
																+    )
															
 
																+  },
															
 
																+  methods: {
															
 
																+    // 点击查看大图
															
 
																+    lookImg(url) {
															
 
																+      let dom = this.$refs.viewer.$viewer
															
 
																+      this.lookPics = [url]
															
 
																+      dom.show()
															
 
																+    },
															
 
																+    // 音频播放完毕
															
 
																+    overAudio() {
															
 
																+      console.log("播放声音完毕")
															
 
																+      this.audioAc(false)
															
 
																+    },
															
 
																+    // 音频的状态
															
 
																+    audioAc(flag) {
															
 
																+      this.iconArr.forEach((v) => {
															
 
																+        if (v.id === "audio") v.audioAc = flag
															
 
																+      })
															
 
																+    },
															
 
																+    // 点击切换图片--视频
															
 
																+    changeActive(id, flag) {
															
 
																+      if (id === "audio" && flag === false) {
															
 
																+        this.audioAc(true)
															
 
																+        this.$refs.musicBg.play()
															
 
																+        return
															
 
																+      } else if (id === "audio" && flag === true) {
															
 
																+        this.audioAc(false)
															
 
																+        this.$refs.musicBg.pause()
															
 
																+        return
															
 
																+      }
															
 
																+      this.active = id
															
 
																+    },
															
 
																+    async getData() {
															
 
																+      // https://www.4dmodel.com/
															
 
																+      let url = `https://super.4dage.com/data/${
															
 
																+        this.id
															
 
																+      }/hot/js/data.js?time=${Math.random()}`
															
 
																+      let result = (await this.$http.get(url)).data
															
 
																+      this.data = result[this.m]
															
 
																+      if (!this.data) {
															
 
																+        return alert("热点解析错误")
															
 
																+      }
															
 
																+      this.audio = this.data["backgroundMusic"]
															
 
																+      if (!this.data.content && this.isMobile) {
															
 
																+        this.iconArr.pop()
															
 
																+      }
															
 
																+      this.iconArr.forEach((item) => {
															
 
																+        if (this.data[item.id]) {
															
 
																+          this.active = !this.active ? item.id : this.active
															
 
																+          item.display = true
															
 
																+        }
															
 
																+        // 如果有音频
															
 
																+        if (item.id === "audio" && this.audio) item.display = true
															
 
																+      })
															
 
																+    },
															
 
																+
															
 
																+    colseParent(item) {
															
 
																+      if (this.isMobile) {
															
 
																+        if (
															
 
																+          item.indexOf("mp.weixin.qq.com/mp/") > -1 &&
															
 
																+          this.active === "iframe"
															
 
																+        ) {
															
 
																+          window.parent.document.getElementById("closepop").click()
															
 
																+        }
															
 
																+      }
															
 
																+    },
															
 
																+    fixUrl(item) {
															
 
																+      let condition =
															
 
																+        item.indexOf("http://") > -1 || item.indexOf("https://") > -1
															
 
																+      if (this.isMobile) {
															
 
																+        if (
															
 
																+          item.indexOf("mp.weixin.qq.com/mp/") > -1 &&
															
 
																+          this.active === "iframe"
															
 
																+        ) {
															
 
																+          return `https://www.4dmodel.com/SuperTwo/hot_online1/linktoWC.html?url=${encodeURIComponent(
															
 
																+            item
															
 
																+          )}`
															
 
																+        }
															
 
																+      }
															
 
																+      if (!condition) {
															
 
																+        return "https://" + item
															
 
																+      }
															
 
																+      return item
															
 
																+    },
															
 
																+    slideto(action) {
															
 
																+      this.swiper[action]()
															
 
																+    },
															
 
																+  },
															
 
																+}
															
 
																+</script>
															
 
																+
															
 
																+<style lang="less" scoped>
															
 
																+.viewerCla img {
															
 
																+  display: none;
															
 
																+}
															
 
																+.audio {
															
 
																+  position: fixed;
															
 
																+  top: -100px;
															
 
																+  left: -100px;
															
 
																+  opacity: 0;
															
 
																+}
															
 
																+
															
 
																+.mb-intro {
															
 
																+  color: #fff;
															
 
																+  padding: 10px;
															
 
																+  > p {
															
 
																+    line-height: 1.5;
															
 
																+    letter-spacing: 1px;
															
 
																+    &:first-of-type {
															
 
																+      font-weight: bold;
															
 
																+      font-size: 20px;
															
 
																+      padding-right: 40px;
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+.home {
															
 
																+  position: absolute;
															
 
																+  left: 50%;
															
 
																+  top: 50%;
															
 
																+  transform: translate(-50%, -50%);
															
 
																+  width: 100%;
															
 
																+  height: 100%;
															
 
																+  max-width: 1329px;
															
 
																+  max-height: 848px;
															
 
																+  background: #E5DFCD;
															
 
																+  border-top: solid 8px #A10E0C;
															
 
																+  border-bottom: solid 8px #A10E0C;
															
 
																+  padding: 28px 100px;
															
 
																+  box-sizing: border-box;
															
 
																+  .content {
															
 
																+    width: 100%;
															
 
																+    height: 80%;
															
 
																+    .warpper {
															
 
																+      width: 100%;
															
 
																+      height: 100%;
															
 
																+      .slide {
															
 
																+        font-size: 0;
															
 
																+        img,
															
 
																+        video,
															
 
																+        iframe {
															
 
																+          max-height: 570px;
															
 
																+          border-radius: 14px;
															
 
																+        }
															
 
																+
															
 
																+        iframe {
															
 
																+          height: 570px;
															
 
																+          width: 1000px;
															
 
																+        }
															
 
																+      }
															
 
																+    }
															
 
																+  }
															
 
																+  .isMobileCon {
															
 
																+    height: calc(100vh - 90px);
															
 
																+  }
															
 
																+
															
 
																+  .iconarr {
															
 
																+    z-index: 1999;
															
 
																+    position: absolute;
															
 
																+    right: 30px;
															
 
																+    bottom: calc(20vh - 20px);
															
 
																+    list-style: none;
															
 
																+    display: flex;
															
 
																+    justify-content: flex-end;
															
 
																+    li {
															
 
																+      display: flex;
															
 
																+      align-items: center;
															
 
																+      justify-content: center;
															
 
																+      color: #fff;
															
 
																+      list-style: none;
															
 
																+      font-size: 14px;
															
 
																+      width: 90px;
															
 
																+      height: 32px;
															
 
																+      line-height: 32px;
															
 
																+      cursor: pointer;
															
 
																+      border-radius: 10px;
															
 
																+      border: solid 1px #fff;
															
 
																+      margin-right: 10px;
															
 
																+      span {
															
 
																+        margin-left: 4px;
															
 
																+      }
															
 
																+    }
															
 
																+    .active {
															
 
																+      background: #19bbed;
															
 
																+      border: none;
															
 
																+    }
															
 
																+  }
															
 
																+  .oneChuMusic {
															
 
																+    opacity: 0;
															
 
																+    pointer-events: none;
															
 
																+  }
															
 
																+  .onlyTxt {
															
 
																+    display: none !important;
															
 
																+  }
															
 
																+  .intro {
															
 
																+    max-height: 19vh;
															
 
																+    overflow: auto;
															
 
																+    width: 70%;
															
 
																+    color: #fff;
															
 
																+    margin: 0 auto;
															
 
																+    > h3 {
															
 
																+      font-size: 20px;
															
 
																+      font-weight: 600;
															
 
																+    }
															
 
																+    > p {
															
 
																+      line-height: 1.5;
															
 
																+      margin-top: 10px;
															
 
																+      font-size: 16px;
															
 
																+      text-indent: 32px;
															
 
																+    }
															
 
																+  }
															
 
																+  .ismtop {
															
 
																+    max-height: 65%;
															
 
																+    height: 65%;
															
 
																+    padding: 50px 0;
															
 
																+    display: flex;
															
 
																+    flex-direction: column;
															
 
																+    justify-content: center;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@media screen and (max-width: 1400px) {
															
 
																+  .home {
															
 
																+    overflow-y: auto;
															
 
																+    overflow-x: hidden;
															
 
																+    .content {
															
 
																+      .warpper {
															
 
																+        .slide {
															
 
																+          img,
															
 
																+          video,
															
 
																+          iframe {
															
 
																+            max-height: 500px;
															
 
																+          }
															
 
																+          img {
															
 
																+            max-height: 80vh;
															
 
																+            width: 90%;
															
 
																+          }
															
 
																+          iframe {
															
 
																+            height: 500px;
															
 
																+          }
															
 
																+        }
															
 
																+      }
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@media screen and (max-width: 1000px) {
															
 
																+  .home {
															
 
																+    background: rgba(0, 0, 0, 0.8);
															
 
																+    .content {
															
 
																+      .warpper {
															
 
																+        .slide {
															
 
																+          width: 100%;
															
 
																+          img,
															
 
																+          video,
															
 
																+          iframe {
															
 
																+            max-height: none;
															
 
																+            width: 100%;
															
 
																+            border-radius: 0;
															
 
																+          }
															
 
																+          img {
															
 
																+            max-height: 80vh;
															
 
																+            width: 90%;
															
 
																+          }
															
 
																+          iframe {
															
 
																+            width: 100%;
															
 
																+            height: calc(100vh - 90px);
															
 
																+          }
															
 
																+        }
															
 
																+      }
															
 
																+    }
															
 
																+    .iconarr {
															
 
																+      display: flex;
															
 
																+      flex-wrap: wrap;
															
 
																+      list-style: none;
															
 
																+      margin-right: 0px;
															
 
																+      position: fixed;
															
 
																+      bottom: 0px;
															
 
																+      right: 0px;
															
 
																+      z-index: 1999;
															
 
																+      li {
															
 
																+        width: 70px;
															
 
																+        margin-bottom: 10px;
															
 
																+      }
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+@media only screen and (max-width: 906px) and (orientation: landscape) {
															
 
																+  .home {
															
 
																+    .content {
															
 
																+      .warpper {
															
 
																+        .slide {
															
 
																+          width: 100%;
															
 
																+          img,
															
 
																+          video,
															
 
																+          iframe {
															
 
																+            max-width: 70%;
															
 
																+            max-height: 80vh;
															
 
																+          }
															
 
																+          iframe {
															
 
																+            width: 100%;
															
 
																+            max-width: unset;
															
 
																+            height: calc(100vh - 90px);
															
 
																+          }
															
 
																+        }
															
 
																+      }
															
 
																+    }
															
 
																+  }
															
 
																+}
															
 
																+</style>
															
 
																+
															
 
																+<style>
															
 
																+.swiper-container {
															
 
																+  width: 100%;
															
 
																+  height: 100%;
															
 
																+}
															
 
																+
															
 
																+.swiper-pagination-bullet {
															
 
																+  background: #fff;
															
 
																+}
															
 
																+.swiper-slide {
															
 
																+  text-align: center;
															
 
																+  font-size: 18px;
															
 
																+  display: flex;
															
 
																+  justify-content: center;
															
 
																+  align-items: center;
															
 
																+  transition: 300ms;
															
 
																+  transform: scale(0.8);
															
 
																+  position: relative;
															
 
																+  opacity: 0.5;
															
 
																+}
															
 
																+
															
 
																+.swiper-slide-active,
															
 
																+.swiper-slide-duplicate-active {
															
 
																+  transform: scale(1);
															
 
																+  opacity: 1;
															
 
																+  z-index: 999;
															
 
																+}
															
 
																+
															
 
																+.swiper-button-prev,
															
 
																+.swiper-button-next {
															
 
																+  background: rgba(0, 0, 0, 0.4);
															
 
																+  padding: 10px 20px;
															
 
																+  color: #fff !important;
															
 
																+}
															
 
																+.swiper-button-prev {
															
 
																+  left: 0;
															
 
																+}
															
 
																+.swiper-button-next {
															
 
																+  right: 0;
															
 
																+}
															
 
																+
															
 
																+@media screen and (max-width: 500px) {
															
 
																+  .swiper-slide {
															
 
																+    width: 100%;
															
 
																+  }
															
 
																+}
															
 
																+</style>
															
--- a/src/views/HomeMobile.vue
+++ b/src/views/HomeMobile.vue
@@ -0,0 +1,672 @@
 
																+<template>

															
 
																+  <div class="hotspot-home">

															
 
																+    <audio

															
 
																+      ref="bg-audio"

															
 
																+      class="bg-audio"

															
 
																+      :src="bgAudioUrl"

															
 
																+      loop

															
 
																+      autoplay

															
 
																+    />

															
 
																+

															
 
																+    <button

															
 
																+      class="close"

															
 
																+      @click="onClickClose"

															
 
																+    >

															
 
																+      <img

															
 
																+        src="@/assets/images/close.png"

															
 
																+        alt="关闭"

															
 
																+        draggable="false"

															
 
																+      >

															
 
																+    </button>

															
 
																+

															
 
																+    <div class="title-wrapper">

															
 
																+      <h1

															
 
																+        :title="hotspotData.title"

															
 
																+        v-html="hotspotData.title"

															
 
																+      />

															
 
																+      <img

															
 
																+        src="@/assets/images/title-bottom-line.png"

															
 
																+        alt=""

															
 
																+        class="bottom-line"

															
 
																+      >

															
 
																+    </div>

															
 
																+

															
 
																+    <div

															
 
																+      v-if="isShowVideos"

															
 
																+      v-show="!isShowShare"

															
 
																+      class="swiper-wrapper-mine video-wrap"

															
 
																+    >

															
 
																+      <div

															
 
																+        class="swiper-root"

															
 
																+      >

															
 
																+        <div

															
 
																+          class="swiper-wrapper"

															
 
																+        >

															
 
																+          <div

															
 
																+            v-for="(item, index) in hotspotData.video"

															
 
																+            :key="index"

															
 
																+            class="swiper-slide"

															
 
																+          >

															
 
																+            <video

															
 
																+              ref="video"

															
 
																+              :src="item.url"

															
 
																+              controls

															
 
																+              controlslist="nodownload"

															
 
																+              disablePictureInPicture

															
 
																+            />

															
 
																+          </div>

															
 
																+        </div>

															
 
																+        <div class="swiper-pagination" />

															
 
																+        <div class="swiper-button-prev" />

															
 
																+        <div class="swiper-button-next" />

															
 
																+      </div>

															
 
																+    </div>

															
 
																+

															
 
																+    <div

															
 
																+      v-if="isShowModels"

															
 
																+      class="swiper-wrapper-mine model-wrap"

															
 
																+    >

															
 
																+      <div

															
 
																+        class="swiper-root"

															
 
																+      >

															
 
																+        <div

															
 
																+          class="swiper-wrapper"

															
 
																+        >

															
 
																+          <iframe

															
 
																+            v-for="(item, index) in hotspotData.model"

															
 
																+            :key="index"

															
 
																+            :src="item"

															
 
																+            frameborder="0"

															
 
																+            class="swiper-slide"

															
 
																+          />

															
 
																+        </div>

															
 
																+        <div class="swiper-pagination" />

															
 
																+      </div>

															
 
																+    </div>

															
 
																+

															
 
																+    <div

															
 
																+      v-if="isShowAudios"

															
 
																+      v-show="!isShowShare"

															
 
																+      class="swiper-wrapper-mine audio-wrap"

															
 
																+    >

															
 
																+      <div

															
 
																+        class="swiper-root"

															
 
																+      >

															
 
																+        <div

															
 
																+          class="swiper-wrapper"

															
 
																+        >

															
 
																+          <div

															
 
																+            v-for="(item, index) in hotspotData.audio"

															
 
																+            :key="index"

															
 
																+            class="swiper-slide"

															
 
																+          >

															
 
																+            <audio

															
 
																+              ref="audio"

															
 
																+              :src="item.url"

															
 
																+              controls

															
 
																+              controlslist="nodownload"

															
 
																+              disablePictureInPicture

															
 
																+            />

															
 
																+          </div>

															
 
																+        </div>

															
 
																+        <div class="swiper-pagination" />

															
 
																+      </div>

															
 
																+    </div>

															
 
																+

															
 
																+    <div

															
 
																+      v-if="isShowImages"

															
 
																+      v-show="!isShowShare"

															
 
																+      class="swiper-wrapper-mine image-wrap"

															
 
																+    >

															
 
																+      <div

															
 
																+        class="swiper-root"

															
 
																+      >

															
 
																+        <div

															
 
																+          v-viewer="{

															
 
																+            button: true,

															
 
																+            navbar: false,

															
 
																+            title: false,

															
 
																+            toolbar: false,

															
 
																+            tooltip: false,

															
 
																+            movable: true,

															
 
																+            zoomable: true,

															
 
																+            rotatable: true,

															
 
																+            scalable: true,

															
 
																+            transition: false,

															
 
																+            fullscreen: false,

															
 
																+            keyboard: true,

															
 
																+            loop: false,

															
 
																+          }"

															
 
																+          class="swiper-wrapper"

															
 
																+        >

															
 
																+          <img

															
 
																+            v-for="(item, index) in hotspotData.images"

															
 
																+            :key="index"

															
 
																+            v-lazy="item"

															
 
																+            class="swiper-slide"

															
 
																+            alt=""

															
 
																+            draggable="false"

															
 
																+          >

															
 
																+        </div>

															
 
																+        <div class="swiper-pagination">

															
 
																+          <!-- <span

															
 
																+            class="cur"

															
 
																+          >

															
 
																+            {{ currentSlideIdx + 1 }}

															
 
																+          </span>

															
 
																+          /

															
 
																+          <span>

															
 
																+            {{ hotspotData.Images ? hotspotData.images.length : '' }}

															
 
																+          </span> -->

															
 
																+        </div>

															
 
																+        <div class="swiper-button-prev" />

															
 
																+        <div class="swiper-button-next" />

															
 
																+      </div>

															
 
																+    </div>

															
 
																+

															
 
																+    <menu>

															
 
																+      <button

															
 
																+        v-if="bgAudioUrl"

															
 
																+        @click="isBgAudioMuted = !isBgAudioMuted"

															
 
																+      >

															
 
																+        <img

															
 
																+          v-show="isBgAudioMuted"

															
 
																+          class="bg-audio-control"

															
 
																+          src="@/assets/images/bg-audio-mobile.png"

															
 
																+          alt=""

															
 
																+          draggable="false"

															
 
																+        >

															
 
																+        <img

															
 
																+          v-show="!isBgAudioMuted"

															
 
																+          class="bg-audio-control"

															
 
																+          src="@/assets/images/bg-audio-mobile-muted.png"

															
 
																+          alt=""

															
 
																+          draggable="false"

															
 
																+        >

															
 
																+      </button>

															
 
																+      <!-- <button @click="onClickLike">

															
 
																+          <img

															
 
																+            class="like"

															
 
																+            src="@/assets/images/like-mobile.png"

															
 
																+            alt=""

															
 
																+            draggable="false"

															
 
																+          >

															
 
																+          <transition name="bubble">

															
 
																+            <div

															
 
																+              v-if="isShowPlusOne"

															
 
																+              class="plus-one"

															
 
																+            >

															
 
																+              +1

															
 
																+            </div>

															
 
																+          </transition>

															
 
																+        </button> -->

															
 
																+      <!-- <button @click="onClickShare">

															
 
																+        <img

															
 
																+          class="share"

															
 
																+          src="@/assets/images/share-mobile.png"

															
 
																+          alt=""

															
 
																+          draggable="false"

															
 
																+        >

															
 
																+      </button> -->

															
 
																+    </menu>

															
 
																+

															
 
																+    <div class="desc-wrap">

															
 
																+      <div

															
 
																+        class="place-holder"

															
 
																+        @mousedown.prevent

															
 
																+        @touchstart.prevent

															
 
																+      />

															
 
																+      <div class="desc-bg-wrap">

															
 
																+        <div class="top-bar" />

															
 
																+        <div

															
 
																+          class="desc"

															
 
																+          v-html="descForShow"

															
 
																+        />

															
 
																+      </div>

															
 
																+    </div>

															
 
																+

															
 
																+    <div

															
 
																+      v-if="isShowShare"

															
 
																+      class="share-wrap"

															
 
																+    >

															
 
																+      <img

															
 
																+        v-click-outside.click="closeCode2d"

															
 
																+        src="@/assets/images/code2d.png"

															
 
																+        alt=""

															
 
																+        class="code"

															
 
																+        draggable="false"

															
 
																+      >

															
 
																+    </div>

															
 
																+  </div>

															
 
																+</template>

															
 
																+

															
 
																+<script>

															
 
																+import Swiper from 'swiper/swiper-bundle.esm.js'

															
 
																+import 'swiper/swiper-bundle.css'

															
 
																+import bgImg from "@/assets/images/bg.png"

															
 
																+import { deepProcess } from "@/utils/other.js"

															
 
																+// import browser from "@/utils/browser";

															
 
																+

															
 
																+export default {

															
 
																+  data() {

															
 
																+    return {

															
 
																+      hotspotData: {}, // 热点数据

															
 
																+

															
 
																+      bgAudioUrl: "", //背景音频url

															
 
																+      isBgAudioMuted: false,

															
 
																+

															
 
																+      isShowImages: false,

															
 
																+      isShowVideos: false,

															
 
																+      isShowModels: false,

															
 
																+      isShowAudios: false,

															
 
																+

															
 
																+      currentSlideIdx: 0,

															
 
																+      bgImg,

															
 
																+      isShowPlusOne: false,

															
 
																+      isShowShare: false,

															
 
																+    }

															
 
																+  },

															
 
																+  computed: {

															
 
																+    descForShow() {

															
 
																+      if (this.isShowImages) {

															
 
																+        return this.hotspotData.imagesDesc[this.currentSlideIdx] || this.hotspotData.content

															
 
																+      } else if (this.isShowVideos) {

															
 
																+        return this.hotspotData.videosDesc[this.currentSlideIdx] || this.hotspotData.content

															
 
																+      } else {

															
 
																+        return this.hotspotData.content

															
 
																+      }

															
 
																+    },

															
 
																+  },

															
 
																+  watch: {

															
 
																+    isBgAudioMuted: {

															
 
																+      handler(vNew) {

															
 
																+        if (vNew) {

															
 
																+          this.$refs['bg-audio'].pause() // or toggle静音？

															
 
																+        } else {

															
 
																+          this.$refs['bg-audio'].play() // or toggle静音？

															
 
																+        }

															
 
																+      }

															
 
																+    }

															
 
																+  },

															
 
																+  async mounted() {

															
 
																+    await this.getData()

															
 
																+    this.$nextTick(() => {

															
 
																+      const that = this

															
 
																+      new Swiper('.swiper-root', {

															
 
																+        pagination: {

															
 
																+          el: '.swiper-pagination',

															
 
																+        },

															
 
																+        navigation: {

															
 
																+          nextEl: '.swiper-button-next',

															
 
																+          prevEl: '.swiper-button-prev',

															
 
																+        },

															
 
																+

															
 
																+        on: {

															
 
																+          // 自动播放

															
 
																+          afterInit: function (e) {

															
 
																+            if (that.isShowVideos) {

															
 
																+              that.$nextTick(() => {

															
 
																+                that.$refs.video[0].play()

															
 
																+              })

															
 
																+            }

															
 
																+            if (that.isShowAudios) {

															
 
																+              that.$nextTick(() => {

															
 
																+                that.$refs.audio[0].play()

															
 
																+              })

															
 
																+            }

															
 
																+          },

															
 
																+          slideChange: function(e) {

															
 
																+            that.currentSlideIdx = e.activeIndex

															
 
																+

															
 
																+            // 自动播放

															
 
																+            if (that.isShowVideos) {

															
 
																+              for (let index = 0; index < that.$refs.video.length; index++) {

															
 
																+                if (index !== that.currentSlideIdx) {

															
 
																+                  that.$refs.video[index].pause()

															
 
																+                } else {

															
 
																+                  that.$refs.video[index].play()

															
 
																+                }

															
 
																+              }

															
 
																+            }

															
 
																+            if (that.isShowAudios) {

															
 
																+              for (let index = 0; index < that.$refs.audio.length; index++) {

															
 
																+                if (index !== that.currentSlideIdx) {

															
 
																+                  that.$refs.audio[index].pause()

															
 
																+                } else {

															
 
																+                  that.$refs.audio[index].play()

															
 
																+                }

															
 
																+              }

															
 
																+            }

															
 
																+          }

															
 
																+        }

															
 
																+      })

															
 
																+    })

															
 
																+  },

															
 
																+  methods: {

															
 
																+    changeSubStr(str) {

															
 
																+      return str.replace('https://super.4dage.com/', process.env.VUE_APP_G_PREFIX)

															
 
																+    },

															
 
																+    async getData() {

															
 
																+      let url = `${process.env.VUE_APP_G_PREFIX}/data/${this.$route.query.id}/hot/js/data.js?time=${Math.random()}`

															
 
																+      let result = (await this.$http.get(url)).data

															
 
																+      deepProcess(result, this.changeSubStr)

															
 
																+

															
 
																+      this.hotspotData = result[this.$route.query.m]

															
 
																+      if (!this.hotspotData) {

															
 
																+        return alert("热点解析错误")

															
 
																+      }

															
 
																+      console.log('热点数据：', this.hotspotData)

															
 
																+

															
 
																+      // this.bgAudioUrl = this.hotspotData.backgroundMusic

															
 
																+

															
 
																+      if (this.hotspotData.images && this.hotspotData.images.length) {

															
 
																+        this.isShowImages = true

															
 
																+      } else if (this.hotspotData.video && this.hotspotData.video.length) {

															
 
																+        this.isShowVideos = true

															
 
																+      } else if (this.hotspotData.model && this.hotspotData.model.length) {

															
 
																+        this.isShowModels = true

															
 
																+      } else if (this.hotspotData.backgroundMusic) {

															
 
																+        this.isShowAudios = true

															
 
																+        this.hotspotData.audio = [{ url: this.hotspotData.backgroundMusic }]

															
 
																+      }

															
 
																+    },

															
 
																+    onClickClose() {

															
 
																+      window.parent.document.getElementById('closepop').click()

															
 
																+    },

															
 
																+    // onClickLike() {

															
 
																+    //   const res = globalApi.like()

															
 
																+    //   if (res && res.then) {

															
 
																+    //   res.then(() => {

															
 
																+    //   this.isShowPlusOne = true

															
 
																+    //   setTimeout(() => {

															
 
																+    //     this.isShowPlusOne = false

															
 
																+    //   }, 1000)

															
 
																+    //   })

															
 
																+    //   }

															
 
																+    // },

															
 
																+    onClickShare() {

															
 
																+      setTimeout(() => {

															
 
																+        this.isShowShare = true

															
 
																+      }, 200)

															
 
																+    },

															
 
																+    closeCode2d() {

															
 
																+      if (this.isShowShare) {

															
 
																+        this.isShowShare = false

															
 
																+      }

															
 
																+    }

															
 
																+  }

															
 
																+}

															
 
																+</script>

															
 
																+

															
 
																+<style lang="less" scoped>

															
 
																+.hotspot-home {

															
 
																+  position: absolute;

															
 
																+  left: 0;

															
 
																+  top: 0;

															
 
																+  width: 100%;

															
 
																+  height: 100%;

															
 
																+  color: #F1F3F4;

															
 
																+  z-index: 0;

															
 
																+  > .bg-audio {

															
 
																+    display: none;

															
 
																+  }

															
 
																+

															
 
																+  > button.close {

															
 
																+    position: absolute;

															
 
																+    top: 20px;

															
 
																+    right: 30px;

															
 
																+    width: 33.5px;

															
 
																+    height: 33.5px;

															
 
																+    z-index: 1;

															
 
																+    > img {

															
 
																+      width: 100%;

															
 
																+      height: 100%;

															
 
																+    }

															
 
																+  }

															
 
																+

															
 
																+  > .title-wrapper {

															
 
																+    position: absolute;

															
 
																+    top: 62px;

															
 
																+    left: 50%;

															
 
																+    transform: translateX(-50%);

															
 
																+    width: 90%;

															
 
																+    z-index: 1;

															
 
																+    > h1 {

															
 
																+      width: 100%;

															
 
																+      font-size: 27.5px;

															
 
																+      line-height: 1.2em;

															
 
																+      font-size: 27.5px;

															
 
																+      font-family: DFLiShuW7;

															
 
																+      letter-spacing: 2px;

															
 
																+      text-align: center;

															
 
																+      display: -webkit-box;

															
 
																+      -webkit-box-orient: vertical;

															
 
																+      -webkit-line-clamp: 2;

															
 
																+      overflow: hidden;

															
 
																+    }

															
 
																+    > .bottom-line {

															
 
																+      position: absolute;

															
 
																+      top: 100%;

															
 
																+      left: calc(50% + 10px);

															
 
																+      transform: translateX(-50%);

															
 
																+      width: 174px;

															
 
																+      height: 9.5px;

															
 
																+    }

															
 
																+  }

															
 
																+

															
 
																+  .swiper-wrapper-mine {

															
 
																+    position: absolute;

															
 
																+    top: 150px;

															
 
																+    left: 0px;

															
 
																+    width: 100%;

															
 
																+    height: 250px;

															
 
																+    z-index: 1;

															
 
																+    .swiper-root {

															
 
																+      overflow: hidden;

															
 
																+      height: 100%;

															
 
																+      width: 100%;

															
 
																+      .swiper-wrapper {

															
 
																+      }

															
 
																+      .swiper-pagination {

															
 
																+        position: absolute;

															
 
																+        top: 100%;

															
 
																+        left: 50%;

															
 
																+        transform: translateX(-50%);

															
 
																+        font-size: 1.33rem;

															
 
																+        font-family: Inter-Regular, Inter;

															
 
																+        .cur {

															
 
																+        }

															
 
																+      }

															
 
																+      .swiper-button-prev {

															
 
																+        left: 10px;

															
 
																+        width: 20px;

															
 
																+        background-image: url(../assets/images/arrow-left.png);

															
 
																+        background-size: contain;

															
 
																+        background-repeat: no-repeat;

															
 
																+        background-position: center;

															
 
																+        &::after {

															
 
																+          content: '';

															
 
																+        }

															
 
																+      }

															
 
																+      .swiper-button-next {

															
 
																+        right: 10px;

															
 
																+        width: 20px;

															
 
																+        background-image: url(../assets/images/arrow-right.png);

															
 
																+        background-size: contain;

															
 
																+        background-repeat: no-repeat;

															
 
																+        background-position: center;

															
 
																+        &::after {

															
 
																+          content: '';

															
 
																+        }

															
 
																+      }

															
 
																+    }

															
 
																+  }

															
 
																+  .swiper-wrapper-mine.video-wrap {

															
 
																+    .swiper-root {

															
 
																+      .swiper-wrapper {

															
 
																+        .swiper-slide {

															
 
																+          > video {

															
 
																+            width: 100%;

															
 
																+            height: 100%;

															
 
																+            background: #000;

															
 
																+          }

															
 
																+        }

															
 
																+      }

															
 
																+    }

															
 
																+  }

															
 
																+  .swiper-wrapper-mine.model-wrap {

															
 
																+    .swiper-root {

															
 
																+      .swiper-wrapper {

															
 
																+      }

															
 
																+    }

															
 
																+  }

															
 
																+  .swiper-wrapper-mine.audio-wrap {

															
 
																+    .swiper-root {

															
 
																+      .swiper-wrapper {

															
 
																+        .swiper-slide {

															
 
																+          > audio {

															
 
																+            position: absolute;

															
 
																+            top: 50%;

															
 
																+            left: 50%;

															
 
																+            width: 80%;

															
 
																+            transform: translate(-50%, -50%);

															
 
																+          }

															
 
																+        }

															
 
																+      }

															
 
																+    }

															
 
																+  }

															
 
																+  .swiper-wrapper-mine.image-wrap {

															
 
																+    .swiper-root {

															
 
																+      .swiper-wrapper {

															
 
																+        > img {

															
 
																+          width: 100%;

															
 
																+          height: 100%;

															
 
																+          object-fit: contain;

															
 
																+        }

															
 
																+      }

															
 
																+    }

															
 
																+  }

															
 
																+

															
 
																+  > menu {

															
 
																+    position: absolute;

															
 
																+    top: 415px;

															
 
																+    left: 50%;

															
 
																+    transform: translateX(-50%);

															
 
																+    z-index: 1;

															
 
																+    > button {

															
 
																+      display: inline-block;

															
 
																+      width: 24px;

															
 
																+      height: 24px;

															
 
																+      margin-right: 38.5px;

															
 
																+      position: relative;

															
 
																+      &:last-of-type{

															
 
																+        margin-right: initial;

															
 
																+      }

															
 
																+      img {

															
 
																+        width: 100%;

															
 
																+        height: 100%;

															
 
																+      }

															
 
																+      // .plus-one {

															
 
																+      //   position: absolute;

															
 
																+      //   top: 0;

															
 
																+      //   right: 0;

															
 
																+      //   transform: translate(50%, -50%);

															
 
																+      // }

															
 
																+    }

															
 
																+  }

															
 
																+

															
 
																+  > .desc-wrap {

															
 
																+    position: absolute;

															
 
																+    top: 0;

															
 
																+    left: 0;

															
 
																+    right: 0;

															
 
																+    bottom: 0;

															
 
																+    overflow: auto;

															
 
																+    > .place-holder {

															
 
																+      width: 100%;

															
 
																+      height: 450px;

															
 
																+    }

															
 
																+    > .desc-bg-wrap {

															
 
																+      z-index: 2;

															
 
																+      position: absolute;

															
 
																+      top: 450px;

															
 
																+      left: 50%;

															
 
																+      transform: translateX(-50%);

															
 
																+      width: calc(100vw - 11px * 2);

															
 
																+      height: calc((100vw - 11px * 2) * 1.7);

															
 
																+      background-image: url(@/assets/images/bg-mobile.png);

															
 
																+      background-size: contain;

															
 
																+      background-repeat: no-repeat;

															
 
																+      background-position: center center;

															
 
																+      > .top-bar {

															
 
																+        position: absolute;

															
 
																+        top: 20px;

															
 
																+        left: 50%;

															
 
																+        transform: translateX(-50%);

															
 
																+        width: 127px;

															
 
																+        height: 4px;

															
 
																+        background: #F4D49F;

															
 
																+        border-radius: 2px;

															
 
																+      }

															
 
																+      > .desc {

															
 
																+        position: absolute;

															
 
																+        font-size: 16px;

															
 
																+        line-height: 26px;

															
 
																+        font-family: Adobe Heiti Std;

															
 
																+        top: 77px;

															
 
																+        bottom: 40px;

															
 
																+        left: 26px;

															
 
																+        right: 26px;

															
 
																+        width: calc(100% - 26px * 2);

															
 
																+        overflow: auto;

															
 
																+      }

															
 
																+    }

															
 
																+  }

															
 
																+

															
 
																+  .share-wrap {

															
 
																+    position: absolute;

															
 
																+    top: 0;

															
 
																+    left: 0;

															
 
																+    width: 100%;

															
 
																+    height: 100%;

															
 
																+    z-index: 1;

															
 
																+    > img.code {

															
 
																+      position: absolute;

															
 
																+      top: 190px;

															
 
																+      left: 50%;

															
 
																+      transform: translateX(-50%);

															
 
																+      width: 170px;

															
 
																+      height: 170px;

															
 
																+    }

															
 
																+  }

															
 
																+}

															
 
																+

															
 
																+/deep/.swiper-pagination-bullet-active {

															
 
																+  background: #a10e0c;

															
 
																+}

															
 
																+

															
 
																+// .bubble-enter {

															
 
																+//   opacity: 0;

															
 
																+//   top: 1rem !important;

															
 
																+// }

															
 
																+// .bubble-enter-to {

															
 
																+//   opacity: 1;

															
 
																+//   top: 0 !important;

															
 
																+// }

															
 
																+// .bubble-enter-active {

															
 
																+//   transition: all 0.5s;

															
 
																+// }

															
 
																+// .bubble-leave {

															
 
																+//   opacity: 1;

															
 
																+//   top: 0 !important;

															
 
																+// }

															
 
																+// .bubble-leave-to {

															
 
																+//   opacity: 0;

															
 
																+//   top: -1rem !important;

															
 
																+// }

															
 
																+// .bubble-leave-active {

															
 
																+//   transition: all 0.5s;

															
 
																+// }

															
 
																+

															
 
																+::-webkit-scrollbar { width: 0; height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/

															
 
																+</style>
															
--- a/src/views/HomeWeb.vue
+++ b/src/views/HomeWeb.vue
@@ -0,0 +1,637 @@
 
																+<template>

															
 
																+  <div

															
 
																+    ref="comp-root"

															
 
																+    class="hotspot-home"

															
 
																+  >

															
 
																+    <audio

															
 
																+      ref="bg-audio"

															
 
																+      class="bg-audio"

															
 
																+      :src="bgAudioUrl"

															
 
																+      loop

															
 
																+      autoplay

															
 
																+    />

															
 
																+

															
 
																+    <button

															
 
																+      class="close"

															
 
																+      @click="onClickClose"

															
 
																+    >

															
 
																+      <img

															
 
																+        src="@/assets/images/close.png"

															
 
																+        alt="关闭"

															
 
																+        draggable="false"

															
 
																+      >

															
 
																+    </button>

															
 
																+    <div

															
 
																+      class="bg-wrapper"

															
 
																+      :style="{

															
 
																+        backgroundImage: `url(${bgImg})`,

															
 
																+      }"

															
 
																+    >

															
 
																+      <h1

															
 
																+        :title="hotspotData.title"

															
 
																+        :style="{

															
 
																+          backgroundImage: `url(${titleBottomLine})`,

															
 
																+        }"

															
 
																+        v-html="hotspotData.title"

															
 
																+      />

															
 
																+      <div

															
 
																+        class="desc"

															
 
																+        v-html="descForShow"

															
 
																+      />

															
 
																+      <menu>

															
 
																+        <button

															
 
																+          v-if="bgAudioUrl"

															
 
																+          @click="isBgAudioMuted = !isBgAudioMuted"

															
 
																+        >

															
 
																+          <img

															
 
																+            v-show="isBgAudioMuted"

															
 
																+            class="bg-audio-control"

															
 
																+            src="@/assets/images/bg-audio.png"

															
 
																+            alt=""

															
 
																+            draggable="false"

															
 
																+          >

															
 
																+          <img

															
 
																+            v-show="!isBgAudioMuted"

															
 
																+            class="bg-audio-control"

															
 
																+            src="@/assets/images/bg-audio-muted.png"

															
 
																+            alt=""

															
 
																+            draggable="false"

															
 
																+          >

															
 
																+        </button>

															
 
																+        <!-- <button @click="onClickLike">

															
 
																+          <img

															
 
																+            class="like"

															
 
																+            src="@/assets/images/like.png"

															
 
																+            alt=""

															
 
																+            draggable="false"

															
 
																+          >

															
 
																+          <transition name="bubble">

															
 
																+            <div

															
 
																+              v-if="isShowPlusOne"

															
 
																+              class="plus-one"

															
 
																+            >

															
 
																+              +1

															
 
																+            </div>

															
 
																+          </transition>

															
 
																+        </button> -->

															
 
																+        <!-- <button @click="onClickShare">

															
 
																+          <img

															
 
																+            class="share"

															
 
																+            src="@/assets/images/share.png"

															
 
																+            alt=""

															
 
																+            draggable="false"

															
 
																+          >

															
 
																+        </button> -->

															
 
																+      </menu>

															
 
																+

															
 
																+      <div

															
 
																+        v-if="isShowVideos"

															
 
																+        v-show="!isShowShare"

															
 
																+        class="swiper-wrapper-mine video-wrap"

															
 
																+      >

															
 
																+        <div

															
 
																+          class="swiper-root"

															
 
																+        >

															
 
																+          <div

															
 
																+            class="swiper-wrapper"

															
 
																+          >

															
 
																+            <div

															
 
																+              v-for="(item, index) in hotspotData.video"

															
 
																+              :key="index"

															
 
																+              class="swiper-slide"

															
 
																+            >

															
 
																+              <video

															
 
																+                ref="video"

															
 
																+                :src="item.url"

															
 
																+                controls

															
 
																+                controlslist="nodownload"

															
 
																+                disablePictureInPicture

															
 
																+              />

															
 
																+            </div>

															
 
																+          </div>

															
 
																+          <div class="swiper-pagination" />

															
 
																+          <div class="swiper-button-prev" />

															
 
																+          <div class="swiper-button-next" />

															
 
																+        </div>

															
 
																+      </div>

															
 
																+

															
 
																+      <div

															
 
																+        v-if="isShowModels"

															
 
																+        class="swiper-wrapper-mine model-wrap"

															
 
																+      >

															
 
																+        <div

															
 
																+          class="swiper-root"

															
 
																+        >

															
 
																+          <div

															
 
																+            class="swiper-wrapper"

															
 
																+          >

															
 
																+            <iframe

															
 
																+              v-for="(item, index) in hotspotData.model"

															
 
																+              :key="index"

															
 
																+              :src="item"

															
 
																+              frameborder="0"

															
 
																+              class="swiper-slide"

															
 
																+            />

															
 
																+          </div>

															
 
																+          <div class="swiper-pagination" />

															
 
																+          <div class="swiper-button-prev" />

															
 
																+          <div class="swiper-button-next" />

															
 
																+        </div>

															
 
																+      </div>

															
 
																+

															
 
																+      <div

															
 
																+        v-if="isShowAudios"

															
 
																+        v-show="!isShowShare"

															
 
																+        class="swiper-wrapper-mine audio-wrap"

															
 
																+      >

															
 
																+        <div

															
 
																+          class="swiper-root"

															
 
																+        >

															
 
																+          <div

															
 
																+            class="swiper-wrapper"

															
 
																+          >

															
 
																+            <div

															
 
																+              v-for="(item, index) in hotspotData.audio"

															
 
																+              :key="index"

															
 
																+              class="swiper-slide"

															
 
																+            >

															
 
																+              <audio

															
 
																+                ref="audio"

															
 
																+                :src="item.url"

															
 
																+                controls

															
 
																+                controlslist="nodownload"

															
 
																+                disablePictureInPicture

															
 
																+              />

															
 
																+            </div>

															
 
																+          </div>

															
 
																+          <div class="swiper-pagination" />

															
 
																+          <div class="swiper-button-prev" />

															
 
																+          <div class="swiper-button-next" />

															
 
																+        </div>

															
 
																+      </div>

															
 
																+

															
 
																+      <div

															
 
																+        v-if="isShowImages"

															
 
																+        v-show="!isShowShare"

															
 
																+        class="swiper-wrapper-mine image-wrap"

															
 
																+      >

															
 
																+        <div

															
 
																+          class="swiper-root"

															
 
																+        >

															
 
																+          <div

															
 
																+            v-viewer="{

															
 
																+              button: true,

															
 
																+              navbar: false,

															
 
																+              title: false,

															
 
																+              toolbar: false,

															
 
																+              tooltip: false,

															
 
																+              movable: true,

															
 
																+              zoomable: true,

															
 
																+              rotatable: true,

															
 
																+              scalable: true,

															
 
																+              transition: false,

															
 
																+              fullscreen: false,

															
 
																+              keyboard: true,

															
 
																+              loop: false,

															
 
																+            }"

															
 
																+            class="swiper-wrapper"

															
 
																+          >

															
 
																+            <img

															
 
																+              v-for="(item, index) in hotspotData.images"

															
 
																+              :key="index"

															
 
																+              v-lazy="item"

															
 
																+              class="swiper-slide"

															
 
																+              alt=""

															
 
																+              draggable="false"

															
 
																+            >

															
 
																+          </div>

															
 
																+          <div class="swiper-pagination">

															
 
																+          <!-- <span

															
 
																+            class="cur"

															
 
																+          >

															
 
																+            {{ currentSlideIdx + 1 }}

															
 
																+          </span>

															
 
																+          /

															
 
																+          <span>

															
 
																+            {{ hotspotData.Images ? hotspotData.images.length : '' }}

															
 
																+          </span> -->

															
 
																+          </div>

															
 
																+          <div class="swiper-button-prev" />

															
 
																+          <div class="swiper-button-next" />

															
 
																+        </div>

															
 
																+      </div>

															
 
																+

															
 
																+      <div

															
 
																+        v-if="isShowShare"

															
 
																+        v-click-outside.click="closeCode2d"

															
 
																+        class="share-wrap"

															
 
																+      >

															
 
																+        <img

															
 
																+          src="@/assets/images/code2d.png"

															
 
																+          alt=""

															
 
																+          class="code"

															
 
																+          draggable="false"

															
 
																+        >

															
 
																+        <img

															
 
																+          src="@/assets/images/share-tip.png"

															
 
																+          alt=""

															
 
																+          class="tip"

															
 
																+          draggable="false"

															
 
																+        >

															
 
																+      </div>

															
 
																+    </div>

															
 
																+  </div>

															
 
																+</template>

															
 
																+

															
 
																+<script>

															
 
																+import Swiper from 'swiper/swiper-bundle.esm.js'

															
 
																+import 'swiper/swiper-bundle.css'

															
 
																+import bgImg from "@/assets/images/bg.png"

															
 
																+import titleBottomLine from "@/assets/images/title-bottom-line.png"

															
 
																+import { deepProcess } from "@/utils/other.js"

															
 
																+// import browser from "@/utils/browser";

															
 
																+

															
 
																+export default {

															
 
																+  data() {

															
 
																+    return {

															
 
																+      hotspotData: {}, // 热点数据

															
 
																+

															
 
																+      bgAudioUrl: "", //背景音频url

															
 
																+      isBgAudioMuted: false,

															
 
																+

															
 
																+      isShowImages: false,

															
 
																+      isShowVideos: false,

															
 
																+      isShowModels: false,

															
 
																+      isShowAudios: false,

															
 
																+

															
 
																+      currentSlideIdx: 0,

															
 
																+      bgImg,

															
 
																+      titleBottomLine,

															
 
																+      isShowPlusOne: false,

															
 
																+      isShowShare: false,

															
 
																+    }

															
 
																+  },

															
 
																+  computed: {

															
 
																+    descForShow() {

															
 
																+      if (this.isShowImages) {

															
 
																+        return this.hotspotData.imagesDesc[this.currentSlideIdx] || this.hotspotData.content

															
 
																+      } else if (this.isShowVideos) {

															
 
																+        return this.hotspotData.videosDesc[this.currentSlideIdx] || this.hotspotData.content

															
 
																+      } else {

															
 
																+        return this.hotspotData.content

															
 
																+      }

															
 
																+    },

															
 
																+  },

															
 
																+  watch: {

															
 
																+    isBgAudioMuted: {

															
 
																+      handler(vNew) {

															
 
																+        if (vNew) {

															
 
																+          this.$refs['bg-audio'].pause() // or toggle静音？

															
 
																+        } else {

															
 
																+          this.$refs['bg-audio'].play() // or toggle静音？

															
 
																+        }

															
 
																+      }

															
 
																+    }

															
 
																+  },

															
 
																+  async mounted() {

															
 
																+    await this.getData()

															
 
																+    this.$nextTick(() => {

															
 
																+      const that = this

															
 
																+      new Swiper('.swiper-root', {

															
 
																+        pagination: {

															
 
																+          el: '.swiper-pagination',

															
 
																+        },

															
 
																+        navigation: {

															
 
																+          nextEl: '.swiper-button-next',

															
 
																+          prevEl: '.swiper-button-prev',

															
 
																+        },

															
 
																+

															
 
																+        on: {

															
 
																+          // 自动播放

															
 
																+          afterInit: function (e) {

															
 
																+            if (that.isShowVideos) {

															
 
																+              that.$nextTick(() => {

															
 
																+                that.$refs.video[0].play()

															
 
																+              })

															
 
																+            }

															
 
																+            if (that.isShowAudios) {

															
 
																+              that.$nextTick(() => {

															
 
																+                that.$refs.audio[0].play()

															
 
																+              })

															
 
																+            }

															
 
																+          },

															
 
																+          slideChange: function(e) {

															
 
																+            that.currentSlideIdx = e.activeIndex

															
 
																+

															
 
																+            // 自动播放

															
 
																+            if (that.isShowVideos) {

															
 
																+              for (let index = 0; index < that.$refs.video.length; index++) {

															
 
																+                if (index !== that.currentSlideIdx) {

															
 
																+                  that.$refs.video[index].pause()

															
 
																+                } else {

															
 
																+                  that.$refs.video[index].play()

															
 
																+                }

															
 
																+              }

															
 
																+            }

															
 
																+            if (that.isShowAudios) {

															
 
																+              for (let index = 0; index < that.$refs.audio.length; index++) {

															
 
																+                if (index !== that.currentSlideIdx) {

															
 
																+                  that.$refs.audio[index].pause()

															
 
																+                } else {

															
 
																+                  that.$refs.audio[index].play()

															
 
																+                }

															
 
																+              }

															
 
																+            }

															
 
																+          }

															
 
																+        }

															
 
																+      })

															
 
																+    })

															
 
																+

															
 
																+    if (window.innerWidth < 1350 || window.innerHeight < 810) {

															
 
																+      const realWHRatio = window.innerWidth / window.innerHeight

															
 
																+      if (realWHRatio > 1350 / 810) {

															
 
																+        const scaleRate = window.innerHeight / 810

															
 
																+        this.$refs['comp-root'].style.transform = `translate(-50%, -50%) scale(${scaleRate})`

															
 
																+      } else {

															
 
																+        const scaleRate = window.innerWidth / 1350

															
 
																+        this.$refs['comp-root'].style.transform = `translate(-50%, -50%) scale(${scaleRate})`

															
 
																+      }

															
 
																+    }

															
 
																+  },

															
 
																+  methods: {

															
 
																+    changeSubStr(str) {

															
 
																+      return str.replace('https://super.4dage.com/', process.env.VUE_APP_G_PREFIX)

															
 
																+    },

															
 
																+    async getData() {

															
 
																+      let url = `${process.env.VUE_APP_G_PREFIX}/data/${this.$route.query.id}/hot/js/data.js?time=${Math.random()}`

															
 
																+      let result = (await this.$http.get(url)).data

															
 
																+      deepProcess(result, this.changeSubStr)

															
 
																+

															
 
																+      this.hotspotData = result[this.$route.query.m]

															
 
																+      if (!this.hotspotData) {

															
 
																+        return alert("热点解析错误")

															
 
																+      }

															
 
																+      console.log('热点数据：', this.hotspotData)

															
 
																+

															
 
																+      // this.bgAudioUrl = this.hotspotData.backgroundMusic

															
 
																+

															
 
																+      if (this.hotspotData.images && this.hotspotData.images.length) {

															
 
																+        this.isShowImages = true

															
 
																+      } else if (this.hotspotData.video && this.hotspotData.video.length) {

															
 
																+        this.isShowVideos = true

															
 
																+      } else if (this.hotspotData.model && this.hotspotData.model.length) {

															
 
																+        this.isShowModels = true

															
 
																+      } else if (this.hotspotData.backgroundMusic) {

															
 
																+        this.isShowAudios = true

															
 
																+        this.hotspotData.audio = [{ url: this.hotspotData.backgroundMusic }]

															
 
																+      }

															
 
																+    },

															
 
																+    onClickClose() {

															
 
																+      window.parent.document.getElementById('closepop').click()

															
 
																+    },

															
 
																+    // onClickLike() {

															
 
																+    //   const res = globalApi.like()

															
 
																+    //   if (res && res.then) {

															
 
																+    //   res.then(() => {

															
 
																+    //   this.isShowPlusOne = true

															
 
																+    //   setTimeout(() => {

															
 
																+    //     this.isShowPlusOne = false

															
 
																+    //   }, 1000)

															
 
																+    //   })

															
 
																+    //   }

															
 
																+    // },

															
 
																+    onClickShare() {

															
 
																+      setTimeout(() => {

															
 
																+        this.isShowShare = true

															
 
																+      }, 200)

															
 
																+    },

															
 
																+    closeCode2d() {

															
 
																+      if (this.isShowShare) {

															
 
																+        this.isShowShare = false

															
 
																+      }

															
 
																+    }

															
 
																+  }

															
 
																+}

															
 
																+</script>

															
 
																+

															
 
																+<style lang="less" scoped>

															
 
																+.hotspot-home {

															
 
																+  position: absolute;

															
 
																+  left: 50%;

															
 
																+  top: 50%;

															
 
																+  width: 1350px;

															
 
																+  height: 810px;

															
 
																+  padding: 0 70px 0 0;

															
 
																+  color: #F1F3F4;

															
 
																+  transform: translate(-50%, -50%);

															
 
																+  > .bg-audio {

															
 
																+    display: none;

															
 
																+  }

															
 
																+  > button.close {

															
 
																+    position: absolute;

															
 
																+    top: 10px;

															
 
																+    right: 0px;

															
 
																+    width: 58px;

															
 
																+    height: 58px;

															
 
																+    > img {

															
 
																+      width: 100%;

															
 
																+      height: 100%;

															
 
																+    }

															
 
																+  }

															
 
																+  > .bg-wrapper {

															
 
																+    width: 100%;

															
 
																+    height: 100%;

															
 
																+    position: relative;

															
 
																+    background-size: contain;

															
 
																+    background-repeat: no-repeat;

															
 
																+    background-position: center center;

															
 
																+    > h1 {

															
 
																+      position: absolute;

															
 
																+      top: 211px;

															
 
																+      left: 44px;

															
 
																+      max-width: 418px;

															
 
																+      font-size: 28px;

															
 
																+      font-family: DFLiShuW7;

															
 
																+      overflow: hidden;

															
 
																+      white-space: pre;

															
 
																+      text-overflow: ellipsis;

															
 
																+      letter-spacing: 5px;

															
 
																+      padding-left: 10px;

															
 
																+      padding-right: 10px;

															
 
																+      padding-bottom: 24px;

															
 
																+      background-size: contain;

															
 
																+      background-repeat: no-repeat;

															
 
																+      background-position: center bottom;

															
 
																+    }

															
 
																+    > .desc {

															
 
																+      position: absolute;

															
 
																+      top: 347px;

															
 
																+      left: 55px;

															
 
																+      width: 390px;

															
 
																+      font-size: 16px;

															
 
																+      line-height: 26px;

															
 
																+      font-family: Adobe Heiti Std;

															
 
																+      overflow: auto;

															
 
																+      height: 300px;

															
 
																+    }

															
 
																+    > menu {

															
 
																+      position: absolute;

															
 
																+      right: 817px;

															
 
																+      bottom: 90px;

															
 
																+      > button {

															
 
																+        display: inline-block;

															
 
																+        width: 48px;

															
 
																+        height: 48px;

															
 
																+        margin-left: 24px;

															
 
																+        position: relative;

															
 
																+        img {

															
 
																+          width: 100%;

															
 
																+          height: 100%;

															
 
																+        }

															
 
																+        // .plus-one {

															
 
																+        //   position: absolute;

															
 
																+        //   top: 0;

															
 
																+        //   right: 0;

															
 
																+        //   transform: translate(50%, -50%);

															
 
																+        // }

															
 
																+      }

															
 
																+    }

															
 
																+    .swiper-wrapper-mine {

															
 
																+      position: absolute;

															
 
																+      top: 50%;

															
 
																+      right: 30px;

															
 
																+      width: 720px;

															
 
																+      height: 476px;

															
 
																+      transform: translateY(-50%);

															
 
																+      .swiper-root {

															
 
																+        overflow: hidden;

															
 
																+        height: 100%;

															
 
																+        width: 100%;

															
 
																+        .swiper-wrapper {

															
 
																+        }

															
 
																+        .swiper-pagination {

															
 
																+          position: absolute;

															
 
																+          top: 100%;

															
 
																+          left: 50%;

															
 
																+          transform: translateX(-50%);

															
 
																+          font-size: 1.33rem;

															
 
																+          font-family: Inter-Regular, Inter;

															
 
																+          .cur {

															
 
																+          }

															
 
																+        }

															
 
																+        .swiper-button-prev {

															
 
																+          left: -30px;

															
 
																+          width: 30px;

															
 
																+          background-image: url(../assets/images/arrow-left.png);

															
 
																+          background-size: contain;

															
 
																+          background-repeat: no-repeat;

															
 
																+          background-position: center;

															
 
																+          &::after {

															
 
																+            content: '';

															
 
																+          }

															
 
																+        }

															
 
																+        .swiper-button-next {

															
 
																+          right: -30px;

															
 
																+          width: 30px;

															
 
																+          background-image: url(../assets/images/arrow-right.png);

															
 
																+          background-size: contain;

															
 
																+          background-repeat: no-repeat;

															
 
																+          background-position: center;

															
 
																+          &::after {

															
 
																+            content: '';

															
 
																+          }

															
 
																+        }

															
 
																+      }

															
 
																+    }

															
 
																+    .swiper-wrapper-mine.video-wrap {

															
 
																+      .swiper-root {

															
 
																+        .swiper-wrapper {

															
 
																+          .swiper-slide {

															
 
																+            > video {

															
 
																+              width: 100%;

															
 
																+              height: 100%;

															
 
																+              background: #000;

															
 
																+            }

															
 
																+          }

															
 
																+        }

															
 
																+      }

															
 
																+    }

															
 
																+    .swiper-wrapper-mine.model-wrap {

															
 
																+      .swiper-root {

															
 
																+        .swiper-wrapper {

															
 
																+        }

															
 
																+      }

															
 
																+    }

															
 
																+    .swiper-wrapper-mine.audio-wrap {

															
 
																+      .swiper-root {

															
 
																+        .swiper-wrapper {

															
 
																+          .swiper-slide {

															
 
																+            > audio {

															
 
																+              position: absolute;

															
 
																+              top: 50%;

															
 
																+              width: 100%;

															
 
																+              transform: translateY(-50%);

															
 
																+            }

															
 
																+          }

															
 
																+        }

															
 
																+      }

															
 
																+    }

															
 
																+    .swiper-wrapper-mine.image-wrap {

															
 
																+      .swiper-root {

															
 
																+        .swiper-wrapper {

															
 
																+          > img {

															
 
																+            width: 100%;

															
 
																+            height: 100%;

															
 
																+            object-fit: contain;

															
 
																+          }

															
 
																+        }

															
 
																+      }

															
 
																+    }

															
 
																+

															
 
																+    .share-wrap {

															
 
																+      position: absolute;

															
 
																+      top: 50%;

															
 
																+      transform: translateY(-50%);

															
 
																+      right: 244px;

															
 
																+      > img.code {

															
 
																+        width: 300px;

															
 
																+        height: 300px;

															
 
																+      }

															
 
																+      > img.tip {

															
 
																+        position: absolute;

															
 
																+        left: 50%;

															
 
																+        top: calc(100% + 10px);

															
 
																+        transform: translateX(-50%);

															
 
																+        width: 150px;

															
 
																+      }

															
 
																+    }

															
 
																+  }

															
 
																+}

															
 
																+

															
 
																+/deep/.swiper-pagination-bullet-active {

															
 
																+  background: #a10e0c;

															
 
																+}

															
 
																+

															
 
																+// .bubble-enter {

															
 
																+//   opacity: 0;

															
 
																+//   top: 1rem !important;

															
 
																+// }

															
 
																+// .bubble-enter-to {

															
 
																+//   opacity: 1;

															
 
																+//   top: 0 !important;

															
 
																+// }

															
 
																+// .bubble-enter-active {

															
 
																+//   transition: all 0.5s;

															
 
																+// }

															
 
																+// .bubble-leave {

															
 
																+//   opacity: 1;

															
 
																+//   top: 0 !important;

															
 
																+// }

															
 
																+// .bubble-leave-to {

															
 
																+//   opacity: 0;

															
 
																+//   top: -1rem !important;

															
 
																+// }

															
 
																+// .bubble-leave-active {

															
 
																+//   transition: all 0.5s;

															
 
																+// }

															
 
																+</style>
															
--- a/src/views/temp
+++ b/src/views/temp
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,3 @@
 
																+module.exports = {
															
 
																+  publicPath: "./"
															
 
																+};
															
--- a/yarn.lock
+++ b/yarn.lock
	`@@ -0,0 +1,2 @@`
			`+# 测试环境部署地址`
			`+阿里云-4dkk-culture/华南1（深圳）/XuzhouHanStoneReliefArtMuseum/hotspot/`