add hotspot

code/src/pages/tunnel/index.vue

@@ -24,13 +24,14 @@
                 v-for="(sub, idx) in item.children"
                 :key="idx"
               >
-                {{ sub.msg || "-" }}
-                <div class="res-date">
-                  来自：<span :title="sub.nickName">{{
-                    sub.nickName || "-"
-                  }}</span>
-                  的评论 {{ sub.createTime }}
-                </div>
+                <p>
+                  {{ sub.nickName || "-" }}
+                  <span>{{ getTime(sub.createTime) || "-" }}</span>
+                </p>
+
+                <p>
+                  {{ sub.msg || "-" }}
+                </p>
               </div>
             </li>
           </ul>
@@ -49,6 +50,7 @@
                 <input
                   v-model="nickName"
                   ref="nicknameinput"
+                  @blur="removeredp"
                   maxlength="20"
                   placeholder="请输入留言人"
                   type="text"
@@ -58,6 +60,8 @@
               <div class="input textarea">
                 <textarea
                   v-model="msg"
+                  ref="contenttextarea"
+                  @blur="removeredp"
                   maxlength="100"
                   placeholder="请输入留言内容"
                   rows="7"
@@ -252,8 +256,13 @@ export default {
       this.$nextTick(() => {
         this.$refs.nicknameinput && this.$refs.nicknameinput.focus();
         this.$refs.mbnicknameinput && this.$refs.mbnicknameinput.focus();
+        this.$refs.nicknameinput.classList.add('redp');
+        this.$refs.contenttextarea.classList.add('redp');
       });
     },
+    removeredp(e){
+        e.target.classList.remove('redp');
+    },
     async getMessage() {
       this.msg = "";
       this.nickName = "";
@@ -344,6 +353,13 @@ h2 {
   padding: 20px 0;
   font-size: 18px;
 }
+
+.redp{
+    caret-color:red!important;
+    &::placeholder{
+      color: red!important;
+    }
+}
 .message-layout {
   width: 100%;
   height: 100%;
@@ -385,7 +401,7 @@ h2 {
         position: absolute;
         top: 50%;
         left: 50%;
-        width: 80%;
+        width: 72%;
         height: calc(100% - 180px);
         overflow-y: auto;
         transform: translate(-50%, -50%);
@@ -398,19 +414,32 @@ h2 {
               border-bottom: none;
             }
             > p {
-              line-height: 2;
+              line-height: 1.5;
               margin-bottom: 12px;
+              font-size: 18px;
+              &:last-of-type{
+                color: #d1d1d1;
+                font-size: 16px;
+              }
               > span {
                 font-size: 12px;
                 margin-left: 20px;
               }
             }
             .response-con {
-              color: #d1d1d1;
-              .res-date {
-                text-align: right;
-                margin-top: 10px;
-                font-size: 14px;
+              padding-left: 36px;
+              > p {
+                line-height: 1;
+                margin-bottom: 10px;
+                font-size: 16px;
+                &:last-of-type{
+                  color: #d1d1d1;
+                  font-size: 14px;
+                }
+                > span {
+                  font-size: 10px;
+                  margin-left: 20px;
+                }
               }
             }
           }
@@ -485,6 +514,8 @@ h2 {
         padding-left: 10px;
         line-height: 40px;
       }
+
+      
       > span {
         display: inline-block;
         color: #909399;

hotspot/.browserslistrc

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

hotspot/.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'
+  }
+}

hotspot/.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?

hotspot/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/).

hotspot/babel.config.js

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

hotspot/package.json

@@ -0,0 +1,31 @@
+{
+  "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-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"
+  }
+}

hotspot/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>

hotspot/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>

hotspot/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>

hotspot/src/main.js

@@ -0,0 +1,17 @@
+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'
+ 
+
+Vue.config.productionTip = false
+Vue.prototype.$http = axios
+
+Vue.use(Viewer)
+
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app')

hotspot/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

hotspot/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()

hotspot/src/views/About.vue

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

hotspot/src/views/Home.vue

@@ -0,0 +1,466 @@
+<template>
+  <div class="home" @click="autoplay" @touchstart="autoplay">
+    <audio
+      v-if="audio"
+      class="audio"
+      id="audio1"
+      :src="audio"
+      preload
+      autoplay
+      loop
+      ref="musicBg"
+    ></audio>
+    <div
+      class="content"
+      v-if="fixIcon.length > 0"
+      :style="{ height: isMobile ? '100%' : '80%' }"
+    >
+      <div
+        v-if="!isMobile"
+        @click="slideto('slidePrev')"
+        class="swiper-button-prev"
+      ></div>
+      <div class="mb-intro" v-if="active === 'title' && isMobile">
+        <p v-html="data.title"></p>
+        <p v-html="data.content"></p>
+      </div>
+      <swiper v-else class="warpper" ref="mySwiper" :options="swiperOptions">
+        <swiper-slide v-for="(item, i) in data[active]" :key="i">
+          <div class="slide">
+            <img
+              style="cursor: pointer"
+              v-viewer
+              v-if="active === 'images'"
+              :src="fixUrl(item)"
+              alt=""
+            />
+            <video
+              v-else-if="active === 'video'"
+              :src="fixUrl(item.url)"
+              controls
+              autoplay
+            ></video>
+            <iframe
+              @click="colseParent()"
+              v-else
+              :src="fixUrl(item)"
+              frameborder="0"
+            ></iframe>
+          </div>
+        </swiper-slide>
+        <div class="swiper-pagination" slot="pagination"></div>
+      </swiper>
+      <div
+        v-if="!isMobile"
+        @click="slideto('slideNext')"
+        class="swiper-button-next"
+      ></div>
+    </div>
+    <ul class="iconarr" v-if="fixIcon.length > 1">
+      <li
+        :class="{ active: item.id === active }"
+        @click="active = item.id"
+        v-for="(item, i) in fixIcon"
+        :key="i"
+      >
+        <img :src="require(`@/assets/images/${item.img}.png`)" alt="" />
+        <span>{{ item.name }}</span>
+      </li>
+    </ul>
+    <div
+      class="intro"
+      :class="{ ismtop: fixIcon.length <= 0, mcenter:!active }"
+      v-if="!isMobile || (isMobile && fixIcon.length <= 0)"
+    >
+      <h3 v-html="data.title"></h3>
+      <p v-html="data.content"></p>
+    </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: "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",
+  data() {
+    return {
+      loadAuto: false,
+      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,
+            },
+          }
+        : {
+            slidesPerView: 3,
+            spaceBetween: 0,
+            centeredSlides: true,
+            pagination: {
+              el: ".swiper-pagination",
+              clickable: true,
+            },
+          },
+      data: {},
+      iconArr,
+      active: "",
+    };
+  },
+  watch: {
+    active(newVal) {
+      if (!newVal) {
+        return;
+      }
+      if (!this.$refs.musicBg) {
+        return;
+      }
+      setTimeout(() => {
+        if (newVal == "video") {
+          if (!this.$refs.musicBg.paused) {
+            this.$refs.musicBg.pause();
+          }
+        } else {
+          if (this.$refs.musicBg.paused) {
+            this.$refs.musicBg.play(); // 暂停
+          }
+        }
+      }, 500);
+    },
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.$swiper;
+    },
+    fixIcon() {
+      let arr = this.iconArr.filter((item) => !!item.display);
+      return arr;
+    },
+  },
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  methods: {
+    autoplay() {
+      if (this.loadAuto) {
+        return;
+      }
+      try {
+        this.$refs.musicBg.play();
+        this.loadAuto = true;
+      } catch (error) {
+        error;
+      }
+    },
+    async getData() {
+      // http://221.4.210.172:10081
+      let url = `/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;
+        }
+      });
+    },
+
+    colseParent() {
+      if (this.isMobile) {
+          window.parent.document.getElementById("closepop").click();
+      }
+    },
+    fixUrl(item) {
+      let condition =
+        item.indexOf("http://") > -1 || item.indexOf("https://") > -1;
+      if (!condition) {
+        return "https://" + item;
+      }
+      return item;
+    },
+    slideto(action) {
+      this.swiper[action]();
+    },
+  },
+  mounted() {
+    this.getData();
+    document.addEventListener(
+      "WeixinJSBridgeReady",
+      () => {
+        this.autoplay();
+      },
+      false
+    );
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.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;
+    }
+  }
+}
+.home {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #000;
+  .ismtop {
+    padding-top: 40px !important;
+  }
+  
+  .content {
+    width: 100%;
+    height: 80%;
+    .warpper {
+      width: 100%;
+      height: 100%;
+      .slide {
+        font-size: 0;
+        img,
+        video,
+        iframe {
+          max-height: 570px;
+          border-radius: 14px;
+          box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
+        }
+       
+        iframe {
+          height: 570px;
+          width: 1000px;
+        }
+      }
+    }
+  }
+
+  .iconarr {
+    list-style: none;
+    display: flex;
+    justify-content: flex-end;
+    margin-right: 30px;
+    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;
+    }
+  }
+  .intro {
+    max-height: 20vh;
+    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;
+    }
+  }
+  .mcenter{
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 50%;
+    left: 50%;
+    max-height: none;
+  }
+}
+
+@media screen and (max-width: 1400px) {
+  .home {
+    .content {
+      .warpper {
+        .slide {
+          img,
+          video,
+          iframe {
+            max-height: 500px;
+          }
+          img{
+            max-height: 80vh;
+            width: auto;
+          }
+          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: auto;
+          }
+          iframe {
+            width: 100%;
+            height: 100vh;
+          }
+        }
+      }
+    }
+    .iconarr {
+      list-style: none;
+      margin-right: 0px;
+      position: fixed;
+      bottom: 10px;
+      right: 0px;
+      z-index: 10000;
+      li {
+        width: 70px;
+      }
+    }
+  }
+}
+
+@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: 100vh;
+          }
+        }
+      }
+    }
+  }
+}
+</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>

hotspot/vue.config.js

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