shaogen1995 2 年 前
コミット
bc7c09decc

+ 3 - 0
hot/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

+ 17 - 0
hot/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    'eslint:recommended'
+  ],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}

+ 23 - 0
hot/.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?

+ 24 - 0
hot/README.md

@@ -0,0 +1,24 @@
+# hotspot
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

+ 5 - 0
hot/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

ファイルの差分が大きいため隠しています
+ 26499 - 0
hot/package-lock.json


+ 32 - 0
hot/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "hotspot",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.20.0",
+    "core-js": "^3.6.5",
+    "swiper": "^5.4.5",
+    "v-viewer": "^1.5.1",
+    "vue": "^2.6.11",
+    "vue-awesome-swiper": "^4.1.1",
+    "vue-lazyload": "^1.3.3",
+    "vue-router": "^3.2.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

+ 16 - 0
hot/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>

+ 22 - 0
hot/src/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<style lang="less">
+html,body{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+*{
+  margin: 0;
+  padding: 0;
+}
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+</style>

+ 34 - 0
hot/src/assets/base.css

@@ -0,0 +1,34 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body{
+  user-select: none;
+}
+.viewer-title {
+  display: none !important;
+}
+
+.viewer-prev {
+  display: none !important;
+}
+
+.viewer-next {
+  display: none !important;
+}
+
+.viewer-navbar {
+  display: none !important;
+}
+
+.viewer-close {
+  display: none !important;
+}
+
+@media screen and (max-width: 800px) {
+  .viewer-footer {
+    bottom: auto;
+    top: 10px;
+  }
+}

BIN
hot/src/assets/images/IMGerror.png


BIN
hot/src/assets/images/loading.gif


BIN
hot/src/assets/images/pc/audio.png


BIN
hot/src/assets/images/pc/audioAc.png


BIN
hot/src/assets/images/pc/icon1.png


BIN
hot/src/assets/images/pc/icon1Ac.png


BIN
hot/src/assets/images/pc/icon2.png


BIN
hot/src/assets/images/pc/icon2Ac.png


BIN
hot/src/assets/images/pc/icon3.png


BIN
hot/src/assets/images/pc/icon3Ac.png


BIN
hot/src/assets/images/pc/left.png


BIN
hot/src/assets/images/pc/right.png


BIN
hot/src/assets/logo.png


+ 59 - 0
hot/src/components/HelloWorld.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

+ 23 - 0
hot/src/main.js

@@ -0,0 +1,23 @@
+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'
+Vue.use(VueLazyLoad, {
+  error: require('@/assets/images/IMGerror.png'),
+  loading: require('@/assets/images/loading.gif')
+})
+
+Vue.config.productionTip = false
+Vue.prototype.$http = axios
+
+Vue.use(Viewer)
+
+import './assets/base.css'
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app')

+ 27 - 0
hot/src/router/index.js

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+export default router

+ 29 - 0
hot/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()

+ 0 - 0
hot/src/utils/http.js


+ 5 - 0
hot/src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

+ 413 - 0
hot/src/views/Home.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="home">
+    <audio
+      id="myAudio"
+      v-if="audio"
+      v-show="isOneAduio"
+      :src="audio"
+      controls
+    ></audio>
+    <div class="main">
+      <div class="mainCon">
+        <!-- 音频图标 -->
+        <div
+          class="audioIcon"
+          v-if="audio && !isOneAduio"
+          @click="audioSta = !audioSta"
+          :title="audioSta ? '关闭音频' : '打开音频'"
+        >
+          <img
+            :src="
+              require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)
+            "
+            alt=""
+          />
+        </div>
+
+        <!-- 底部的tab -->
+        <div class="flooTabBox" v-if="flooTab.length > 1">
+          <div
+            @click="myType = item.type"
+            class="tabRow"
+            :class="{ tabRowAc: myType === item.type }"
+            v-for="item in flooTab"
+            :key="item.id"
+          >
+            <img
+              :src="
+                require(`@/assets/images/pc/icon${item.id}${
+                  myType === item.type ? 'Ac' : ''
+                }.png`)
+              "
+              alt=""
+            />
+            {{ item.name }}
+            <span
+              v-if="
+                data[item.type] &&
+                data[item.type].length &&
+                data[item.type].length > 1
+              "
+              >{{ item.type === myType ? myInd + 1 + "/" : null
+              }}{{ data[item.type].length }}</span
+            >
+          </div>
+        </div>
+
+        <!-- 主要内容 -->
+
+        <div class="contenBoxMain">
+          <div
+            class="contenBox"
+            :class="{ contenBoxAc: index === myInd }"
+            v-for="(item, index) in data[myType]"
+            :key="myType === 'video' ? item.url : item"
+          >
+            <!-- 模型页面 -->
+            <div class="modelBox" v-if="myType === 'model'">
+              <iframe
+                :src="item"
+                frameborder="0"
+                v-if="index === myInd"
+              ></iframe>
+            </div>
+            <!-- 视频页面 -->
+            <div class="videoBox" v-else-if="myType === 'video'">
+              <video controls :src="item.url" v-if="index === myInd"></video>
+            </div>
+            <!-- 图片页面 -->
+            <div
+              class="imgBox"
+              v-else-if="myType === 'img'"
+              @click="lookImg(item)"
+            >
+              <img v-lazy="item" alt="" />
+            </div>
+          </div>
+          <!-- 左右箭头 -->
+          <div
+            @click="myInd--"
+            class="leftJJ awccJJ"
+            :class="{ noClick: myInd === 0 }"
+            v-if="data[myType] && data[myType].length > 1"
+          >
+            <img src="../assets/images/pc/left.png" alt="" />
+          </div>
+          <div
+            @click="myInd++"
+            class="rightJJ awccJJ"
+            :class="{ noClick: myInd === data[myType].length - 1 }"
+            v-if="data[myType] && data[myType].length > 1"
+          >
+            <img src="../assets/images/pc/right.png" alt="" />
+          </div>
+        </div>
+      </div>
+
+      <!-- 下面的文字介绍 -->
+      <div class="flooTxt">
+        <div class="myTitle">{{ myTitle }}</div>
+        <!-- 视频的介绍 -->
+        <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]">
+          {{ videoTxt[myInd] }}
+        </div>
+        <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]">
+          {{ imgTxt[myInd] }}
+        </div>
+        <div class="myTxt" v-html="myTxt"></div>
+      </div>
+    </div>
+    <!-- 查看图片 -->
+    <viewer class="viewerCla" ref="viewer" :images="lookPics">
+      <img :src="lookPics[0]" alt="" />
+    </viewer>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: "Home",
+  data() {
+    return {
+      m: this.$route.query.m,
+      id: this.$route.query.id,
+      // 音频地址
+      audio: "",
+      // 如果只有单独的音频
+      isOneAduio: false,
+      // 音频状态
+      audioSta: false,
+
+      data: {
+        // 模型数组
+        model: [],
+        // 视频数组
+        video: [],
+        // 图片数组
+        img: [],
+      },
+      // 当前 type
+      myType: "",
+
+      // 底部的tab
+      flooTab: [],
+
+      // 当前索引
+      myInd: 0,
+
+      // 查看图片
+      lookPics: [],
+
+      // 标题
+      myTitle: "",
+      // 内容
+      myTxt: "",
+      // 视频内容
+      videoTxt: [],
+      imgTxt: [],
+    };
+  },
+  watch: {
+    myType() {
+      this.myInd = 0;
+    },
+    // 音频的开启和关闭
+    audioSta(val) {
+      const dom = document.querySelector("#myAudio");
+      if (val) {
+        dom.play();
+        dom.onended = () => {
+          // console.log("----音频播放完毕");
+          this.audioSta = false;
+        };
+      } else dom.pause();
+    },
+  },
+  computed: {},
+  components: {},
+  methods: {
+    // 点击查看大图
+    lookImg(url) {
+      let dom = this.$refs.viewer.$viewer;
+      this.lookPics = [url];
+      dom.show();
+    },
+    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;
+      const resData = result[this.m];
+      console.log("----", resData);
+      if (resData) {
+        this.audio = resData.backgroundMusic;
+        // 只有单独的音频上传
+        if (
+          resData.backgroundMusic &&
+          !resData.model &&
+          !resData.video &&
+          !resData.images
+        ) {
+          this.isOneAduio = true;
+        }
+        // 底部的tab
+        const arr = [];
+        const obj = {};
+        if (resData.model) {
+          obj.model = resData.model;
+          arr.push({ id: 1, type: "model", name: "模型" });
+        }
+        if (resData.video) {
+          obj.video = resData.video;
+          arr.push({ id: 2, type: "video", name: "视频" });
+        }
+        if (resData.images) {
+          obj.img = resData.images;
+          arr.push({ id: 3, type: "img", name: "图片" });
+        }
+        this.flooTab = arr;
+        this.data = obj;
+
+        // 当前type的值 应该为
+        if (resData.model) this.myType = "model";
+        else if (resData.video) this.myType = "video";
+        else if (resData.images) this.myType = "img";
+
+        this.myTitle = resData.title;
+        this.myTxt = resData.content;
+        this.videoTxt = resData.videosDesc;
+        this.imgTxt = resData.imagesDesc;
+      }
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.home {
+  .viewerCla img {
+    display: none;
+  }
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 252, 247, 0.8);
+  backdrop-filter: blur(10px);
+  position: relative;
+  #myAudio {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 500px;
+    height: 60px;
+  }
+  .main {
+    width: 1200px;
+    margin: 0 auto;
+    height: 100%;
+    padding-top: 40px;
+    .mainCon {
+      padding: 40px 60px;
+      position: relative;
+      border-radius: 6px;
+      width: 100%;
+      height: calc(100% - 200px);
+      background: linear-gradient(#929292, #c5c5c5);
+      .audioIcon {
+        cursor: pointer;
+        position: absolute;
+        right: 20px;
+        bottom: 30px;
+      }
+      .flooTabBox {
+        position: absolute;
+        bottom: 30px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        .tabRow {
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          margin: 0 12px;
+          font-size: 12px;
+          background-color: #dedede;
+          padding: 0px 14px;
+          height: 36px;
+          border-radius: 18px;
+          & > img {
+            margin-right: 6px;
+          }
+        }
+        .tabRowAc {
+          background-color: #b90c0c;
+          pointer-events: none;
+          color: #d6b970;
+        }
+      }
+      .contenBoxMain {
+        position: relative;
+        width: 100%;
+        height: calc(100% - 60px);
+      }
+      .contenBox {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        pointer-events: none;
+        transition: all 0.3s;
+
+        .modelBox,
+        .videoBox,
+        .imgBox {
+          width: 100%;
+          height: 100%;
+        }
+        .modelBox {
+          iframe {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .videoBox {
+          video {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .imgBox {
+          cursor: pointer;
+          & > img {
+            pointer-events: none;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+      }
+      .contenBoxAc {
+        opacity: 1;
+        pointer-events: auto;
+      }
+      .awccJJ {
+        cursor: pointer;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: -50px;
+      }
+      .rightJJ {
+        left: auto;
+        right: -50px;
+      }
+      .noClick {
+        opacity: 0.4;
+        pointer-events: none;
+      }
+    }
+    .flooTxt {
+      margin-top: 20px;
+      width: 100%;
+      height: 160px;
+      overflow-y: auto;
+      .myTitle {
+        color: #b90c0c;
+        font-size: 22px;
+        font-weight: 700;
+        margin-bottom: 10px;
+      }
+      .myTxt {
+        font-size: 16px;
+        color: #333333;
+        line-height: 24px;
+      }
+      &::-webkit-scrollbar {
+        /*滚动条整体样式*/
+        width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        /*滚动条里面小方块*/
+        border-radius: 10px;
+        -webkit-box-shadow: inset 0 0 5px transparent;
+        background: #b90c0c;
+      }
+      &::-webkit-scrollbar-track {
+        /*滚动条里面轨道*/
+        -webkit-box-shadow: inset 0 0 5px transparent;
+        border-radius: 10px;
+        background: transparent;
+      }
+    }
+  }
+}
+</style>
+

+ 3 - 0
hot/vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  publicPath: "./"
+};

+ 2 - 1
scene/public/static/js/Hot.js

@@ -46,7 +46,8 @@ window.initHot = function (model) {
             o = "en" == manage.number("lang") ? "&lang=" + manage.number("lang") : ""; -
         1 == r.indexOf("?") ? src = link + "?time=" + randomTime().getTime() + "&id=" + window.number + o : src = link + "&time=" + randomTime().getTime() + "&id=" + window.number + o
         // return 'http://project.4dage.com:8017' + src  // 线上测试
-        return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'hot')
+        // return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'hot')
+        return src
 
     }
     var removeSrcPostMark = function (url) { //去除texture.load时自动加上的'?'

+ 1 - 1
scene/src/components/welcome/index.vue

@@ -41,7 +41,7 @@ export default {
   .btn {
     position: absolute;
     z-index: 10;
-    bottom: 15%;
+    bottom: 10%;
     left: 50%;
     transform: translateX(-50%);
     cursor: pointer;