瀏覽代碼

定制热点

shaogen1995 3 年之前
父節點
當前提交
2f415a06da
共有 54 個文件被更改,包括 27597 次插入1 次删除
  1. 3 0
      hot/.browserslistrc
  2. 17 0
      hot/.eslintrc.js
  3. 23 0
      hot/.gitignore
  4. 24 0
      hot/README.md
  5. 5 0
      hot/babel.config.js
  6. 26495 0
      hot/package-lock.json
  7. 32 0
      hot/package.json
  8. 二進制
      hot/public/data/IzhSW81705964/img/1.png
  9. 二進制
      hot/public/data/IzhSW81705964/img/10.png
  10. 二進制
      hot/public/data/IzhSW81705964/img/11.png
  11. 二進制
      hot/public/data/IzhSW81705964/img/12.png
  12. 二進制
      hot/public/data/IzhSW81705964/img/13.png
  13. 二進制
      hot/public/data/IzhSW81705964/img/14.png
  14. 二進制
      hot/public/data/IzhSW81705964/img/15.png
  15. 二進制
      hot/public/data/IzhSW81705964/img/16.png
  16. 二進制
      hot/public/data/IzhSW81705964/img/17.png
  17. 二進制
      hot/public/data/IzhSW81705964/img/18.png
  18. 二進制
      hot/public/data/IzhSW81705964/img/19.png
  19. 二進制
      hot/public/data/IzhSW81705964/img/2.png
  20. 二進制
      hot/public/data/IzhSW81705964/img/20.png
  21. 二進制
      hot/public/data/IzhSW81705964/img/21.png
  22. 二進制
      hot/public/data/IzhSW81705964/img/22.png
  23. 二進制
      hot/public/data/IzhSW81705964/img/23.png
  24. 二進制
      hot/public/data/IzhSW81705964/img/24.png
  25. 二進制
      hot/public/data/IzhSW81705964/img/25.png
  26. 二進制
      hot/public/data/IzhSW81705964/img/26.png
  27. 二進制
      hot/public/data/IzhSW81705964/img/27.png
  28. 二進制
      hot/public/data/IzhSW81705964/img/3.png
  29. 二進制
      hot/public/data/IzhSW81705964/img/4.png
  30. 二進制
      hot/public/data/IzhSW81705964/img/5.png
  31. 二進制
      hot/public/data/IzhSW81705964/img/6.png
  32. 二進制
      hot/public/data/IzhSW81705964/img/7.png
  33. 二進制
      hot/public/data/IzhSW81705964/img/8.png
  34. 二進制
      hot/public/data/IzhSW81705964/img/9.png
  35. 16 0
      hot/public/index.html
  36. 22 0
      hot/src/App.vue
  37. 二進制
      hot/src/assets/images/IMGerror.png
  38. 二進制
      hot/src/assets/images/iframe-icon.png
  39. 二進制
      hot/src/assets/images/img-icon.png
  40. 二進制
      hot/src/assets/images/loading.gif
  41. 二進制
      hot/src/assets/images/model-icon.png
  42. 二進制
      hot/src/assets/images/txt-icon.png
  43. 二進制
      hot/src/assets/images/video-icon.png
  44. 二進制
      hot/src/assets/logo.png
  45. 59 0
      hot/src/components/HelloWorld.vue
  46. 26 0
      hot/src/main.js
  47. 27 0
      hot/src/router/index.js
  48. 29 0
      hot/src/utils/browser.js
  49. 0 0
      hot/src/utils/http.js
  50. 5 0
      hot/src/views/About.vue
  51. 525 0
      hot/src/views/Home.vue
  52. 285 0
      hot/src/views/data.js
  53. 3 0
      hot/vue.config.js
  54. 1 1
      web/public/index.html

+ 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'
+  ]
+}

File diff suppressed because it is too large
+ 26495 - 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"
+  }
+}

二進制
hot/public/data/IzhSW81705964/img/1.png


二進制
hot/public/data/IzhSW81705964/img/10.png


二進制
hot/public/data/IzhSW81705964/img/11.png


二進制
hot/public/data/IzhSW81705964/img/12.png


二進制
hot/public/data/IzhSW81705964/img/13.png


二進制
hot/public/data/IzhSW81705964/img/14.png


二進制
hot/public/data/IzhSW81705964/img/15.png


二進制
hot/public/data/IzhSW81705964/img/16.png


二進制
hot/public/data/IzhSW81705964/img/17.png


二進制
hot/public/data/IzhSW81705964/img/18.png


二進制
hot/public/data/IzhSW81705964/img/19.png


二進制
hot/public/data/IzhSW81705964/img/2.png


二進制
hot/public/data/IzhSW81705964/img/20.png


二進制
hot/public/data/IzhSW81705964/img/21.png


二進制
hot/public/data/IzhSW81705964/img/22.png


二進制
hot/public/data/IzhSW81705964/img/23.png


二進制
hot/public/data/IzhSW81705964/img/24.png


二進制
hot/public/data/IzhSW81705964/img/25.png


二進制
hot/public/data/IzhSW81705964/img/26.png


二進制
hot/public/data/IzhSW81705964/img/27.png


二進制
hot/public/data/IzhSW81705964/img/3.png


二進制
hot/public/data/IzhSW81705964/img/4.png


二進制
hot/public/data/IzhSW81705964/img/5.png


二進制
hot/public/data/IzhSW81705964/img/6.png


二進制
hot/public/data/IzhSW81705964/img/7.png


二進制
hot/public/data/IzhSW81705964/img/8.png


二進制
hot/public/data/IzhSW81705964/img/9.png


+ 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>

二進制
hot/src/assets/images/IMGerror.png


二進制
hot/src/assets/images/iframe-icon.png


二進制
hot/src/assets/images/img-icon.png


二進制
hot/src/assets/images/loading.gif


二進制
hot/src/assets/images/model-icon.png


二進制
hot/src/assets/images/txt-icon.png


二進制
hot/src/assets/images/video-icon.png


二進制
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>

+ 26 - 0
hot/src/main.js

@@ -0,0 +1,26 @@
+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,{
+  defaultOptions: {
+    title:false
+  }
+})
+
+
+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>

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

@@ -0,0 +1,525 @@
+<template>
+  <div
+    class="home"
+    @click="autoplay"
+    @touchstart="autoplay"
+    v-if="data.content"
+  >
+    <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 ? '90%' : '70%' }"
+    >
+      <div
+        v-if="!isMobile"
+        @click="slideto('slidePrev')"
+        class="swiper-button-prev"
+      ></div>
+
+      <div class="mb-intro" v-show="active === 'title' && isMobile">
+        <p v-html="data.title[myInd]"></p>
+        <p v-html="data.content[myInd]"></p>
+      </div>
+      <swiper
+        v-show="active !== 'title'"
+        class="warpper"
+        ref="mySwiper"
+        :options="swiperOptions"
+      >
+        <swiper-slide v-for="i in data[active]" :key="i">
+          <div class="slide">
+            <img
+              style="cursor: pointer"
+              v-viewer
+              v-if="active === 'images'"
+              v-lazy="imgSrc(i)"
+              alt=""
+            />
+            <video
+              v-else-if="active === 'video'"
+              :src="fixUrl(i.url)"
+              controls
+              autoplay
+            ></video>
+            <iframe
+              @click="colseParent(i)"
+              v-else-if="active === 'model' || active === 'iframe'"
+              :src="fixUrl(i)"
+              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 }"
+      v-if="!isMobile || (isMobile && fixIcon.length <= 0)"
+    >
+      <h3 v-html="data.title[myInd]"></h3>
+      <p v-html="data.content[myInd]"></p>
+    </div>
+  </div>
+  <!-- <h3></h3> -->
+</template>
+
+<script>
+import { obj } from "./data";
+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 {
+      myInd: 0,
+      // 为定制化加的索引
+      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,
+            },
+            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: "",
+    };
+  },
+  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: {
+    imgSrc(val) {
+      if (typeof val === "number") return `/data/${this.m}/img/${val}.png`;
+      else return val;
+    },
+    // 追加的图片地址过滤
+
+    autoplay() {
+      if (this.loadAuto) {
+        return;
+      }
+      try {
+        this.$refs.musicBg.play();
+        this.loadAuto = true;
+      } catch (error) {
+        error;
+      }
+    },
+    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;
+      let temp = result[this.m];
+      obj.forEach((v) => {
+        if (v.id === this.m) {
+          temp = v;
+        } else {
+          temp.title = [temp.title];
+          temp.content = [temp.content];
+        }
+      });
+      //
+      //
+      this.data = temp;
+      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(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]();
+    },
+  },
+  mounted() {
+    this.getData();
+    document.addEventListener(
+      "WeixinJSBridgeReady",
+      () => {
+        this.autoplay();
+      },
+      false
+    );
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.home {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+.audio {
+  position: fixed;
+  top: -100px;
+  left: -100px;
+  opacity: 0;
+}
+
+.mb-intro {
+  height: 90vh;
+  overflow-y: auto;
+  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;
+  .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;
+        }
+
+        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: 30vh;
+    overflow: auto;
+    width: 70%;
+    color: #fff;
+    margin: 0 auto;
+    /deep/ h3 {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 10px;
+    }
+    > p {
+      line-height: 1.5;
+      font-size: 16px;
+    }
+  }
+}
+
+@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: 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;
+}
+.slide img {
+  image-rendering: -webkit-optimize-contrast;
+}
+@media screen and (max-width: 500px) {
+  .swiper-slide {
+    width: 100%;
+  }
+}
+</style>

+ 285 - 0
hot/src/views/data.js

@@ -0,0 +1,285 @@
+export const obj = [
+  {
+    id: 'IzhSW81705964',
+    title: ['鲫鱼 Carassius auratus',
+      '云南裂腹鱼 Schizothorax yunnanensis',
+      '大理裂腹鱼Schizothorax taliensis',
+      '灰裂腹鱼 Schizothorax griseus',
+      '洱海四须鲃Barbodes daliensis',
+      '光唇裂腹鱼 Schizothorax lissolabiatus',
+      '侧纹云南鳅 Yunnanilus pleurotaenia',
+      '华南鲤 Cyprinus rubrofuscus',
+      '青鱼 Mylopharyngodon piceus',
+      '草鱼Ctenopharyngodon idellus',
+      '鲢 Hypophthalmichthys molitrix',
+      '鳙 Aristichthys nobilis',
+      '团头鲂 Megalobrama amblycephala',
+      '麦穗鱼 Pseudorasbora parva',
+      '棒花鱼 Abbottina rivularis',
+      '中华鳑鮍 Rhodeus sinensis',
+      '高体鳑鮍 Rhodeus ocellatus',
+      '波氏栉鰕虎鱼 Ctenogobius cliffordpoperi',
+      '子陵栉鰕虎鱼 Ctenogobius giurinus',
+      '黄黝鱼 Hypseleotris swinhonis',
+      '罗非鱼 Tilapia mossambica',
+      '太湖新银鱼 Neosalanx taihuensis',
+      '乌鳢 Channa argus',
+      '食蚊鱼 Gambusia affinis',
+      '䱗 Hemiculter leucisculus',
+      '黄颡鱼Pelteobagrus fulvidraco',
+      '丁鱥 Tinca tinca',
+    ],
+    content: [`别名:刀子鱼
+    分类:鲤形目Cypriniformes鲤科Cyprinidae
+    分布:全国各地水域常年均有分布。
+    习性:喜欢群集而行。到水草丰茂的浅滩,河湾,芦苇丛中寻食,产卵;遇到水流缓慢或静止不动。<br />
+    <h3>Gold Fish, Carassius auratus</h3>
+    Taxonomy: Order Cypriniformes, Family Cyprinidae
+    Distribution: Can be found in water areas throughout the country in all year round.
+    Habits: Prefers to group into bevies. Forages and spawns in shallow shoals with dense grasses, river bays, and reeds; slows down or keeps still when encountering current.`,
+
+      `别名:面鱼
+    分类:鲤形目Cypriniformes鲤科Cyprinidae
+    分布:云南省大理州洱海流域。
+    习性:自然条件下喜生活于水质清新的江河、水库、湖泊中。属中小型亚冷水性鱼类,云南特有种。为云南四大名贵鱼类之一。<br />
+    <h3>Yunnan Cloven-Breast Fish, Schizothorax yunnanensis</h3>
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: Erhai Basin, Dali Prefecture, Yunnan Province.
+Habits: Under natural conditions, it prefers to inhabit rivers, reservoirs, and lakes with clear and pure water. It is a small or medium-sized subcold water fish that is endemic to Yunnan. One of the four famous and precious fishes in Yunnan.`,
+
+      `别名:弓鱼、竿鱼
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:中国特有种,仅分布于洱海及其附属水系。
+习性:栖息于湖泊中敞水区域,适应于静水环境,主食浮游生物。
+保护级别:国家II级保护动物,已列入中国濒危动物红皮书。<br />
+<h3>Dali Cloven-Breast Fish, Schizothorax taliensis</h3>
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: Endemic to China. Only distributes in the Erhai Lake and its accessory water systems.
+Habits: Inhabits open water areas in the lake. Adapted to still water environment. Mainly feeds on plankton.
+Protection Level: National Protected Animal Grade II. Listed in the Red Data Book of Endangered Animals of China.`,
+
+`别名:灰色裂腹鱼
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:分布于金沙江(乌江)、南盘江、澜沧江、龙川江、大盈江水系。
+习性:自然条件下,栖息环境多为水流湍急、砂砾底质。主食水生无脊椎动物,数量较少。<br/>
+<h3>Grey Cloven-Breast Fish, Schizothorax griseus</h3>
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: Water systems of the Yangtze (Wujiang), Nanpan, Lancang, Longchuan, and Great Yingjiang Rivers.
+Habits: Under natural conditions, its habitats are mostly with fast flowing current and gravel bottom. Mainly feeds on invertebrates. Rare.`,
+
+`别名:镖鱼、青脊梁
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:中国特有种,仅分布于洱海流域。
+习性:生活于湖岸水草丛生处,主食水草。五六月间产卵。1960年代后逐年减少,现已不多见。<br/>
+<h3>Erhai Barbel Fish, Barbodes daliensis</h3>
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: Endemic to China. Only distributed in the Erhai Basin.
+Habits: Inhabits grassy region near lakeshores, and mainly feeds on water grasses. Spawns in May and June. Decreased since the 60s. Uncommonly seen nowadays.`,
+
+`别名:面鱼
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:分布于珠江水系南北盘江、元江、澜沧江和怒江等。
+习性:自然条件下,栖息环境多为水流湍急、砂砾底质。下层鱼类,食藻类和有机碎屑。<br/>
+<h3>Smooth-Lipped Cloven-Breast Fish, Schizothorax lissolabiatus</h3>
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: Pearl River System including South and North Panjiang Rivers and Yuanjiang River, Lancang, and Nujiang Rivers.
+Habits: Under natural conditions, its habitats are mostly with fast flowing current and gravel bottom. A demersal fish, feeds on algae and organic debris.`,
+
+`别名:鱼鳅
+分类:鲤形目Cypriniformes条鳅科Nemacheilidae
+分布:云南滇池、抚仙湖和洱海湖区内的河溪。
+习性:栖息于湖岸浅水区或入湖的河溪缓流处,集群于水底,行动较迟缓。<br/>
+<h3>Striated Stone Loach, Yunnanilus pleurotaenia</h3>
+Taxonomy: Order Cypriniformes, Family Nemacheilidae
+Distribution: Rivers and streams associated with Dianchi, Fuxian, and Erhai Lakes of Yunnan.
+Habits: Lives in shallow water areas near lakeshores or lake entrance of rivers with slow current. Clusters in the water bottom and moves slowly.`,
+
+`别名:红尾鲤、元江鲤
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:珠江水系、云南元江水系和海南岛。
+习性:鲜活时尾鳍下叶呈红色,偶鳍呈淡红色,故称红尾鲤鱼,其生长速度明显快于几种杂交鲤鱼及其他鲤,并且具有肉味好、适应性强、抗病力强、易起捕等优点。<br/>
+<h3>Amur Carp, Cyprinus rubrofuscus</h3>
+Other Vernacular Name: Red-Tailed Carp
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: River Systems of the Pearl River, the Yuanjiang River in Yunnan, and Hainan Island.
+Habits: When alive, the lower lobe of the caudal fin is red, and the lateral fins are light red, therefore also called “red-tailed carp”. Its growth speed is quiet higher than several hybrids and other carps. It also bears advantages of good-tastes, strong adaptability, high disease resistance, and easy to be caught.`,
+
+`别名:乌混、黑混、黑鲩、螺蛳青
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:主要分布于我国长江以南的地区。
+习性:青鱼习性不活泼,通常栖息在水的中下层,食物以螺蛳、蚌、蚬、蛤等为主。是中国淡水养殖的四大家鱼之一。<br/>
+<h3>Black Carp, Mylopharyngodon piceus</h3>
+Other Vernacular Name: Black Chinese Roach
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: It mainly distributes in regions south of the Yangtze River in China.
+Habits: It is usually inactive and inhabits middle to lower levels of the water, and feeds mainly on snails, and clams. It is one of the four major freshwater-bred domestic fishes in China.`,
+
+`别名:鲩、鲩鱼、油鲩、草鲩、白鲩、草根
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:各种水域,比如江河湖泊。
+习性:一般喜居于水的中下层和近岸多水草区域,性活泼,游泳迅速,常成群觅食。为典型的草食性鱼类,是中国淡水养殖的四大家鱼之一。<br/>
+<h3>Grass Carp, Ctenopharyngodon idellus</h3>
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: Various water areas such as rivers and lakes.
+Habits: It usually prefers to live in the middle to lower levels of water and nearshore areas with dense grasses. Active, swift-swimming, and often grouped to forage. A typical herbivorous fish, and one of the four major freshwater-bred domestic fishes in China.`,
+
+`别名:白鲢鱼、鲢子、边鱼
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:国内分布于各大水系。
+习性:栖息水的中上层,以海绵状的鳃耙滤食浮游植物。性活泼,善跳跃。是中国淡水养殖的四大家鱼之一。<br/>
+<h3>Silver Carp, Hypophthalmichthys molitrix</h3>
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: Several major river systems in China.
+Habits: It inhabits the middle to upper levels of water. Feed by filtering phytoplankton with its sponge-like gill rakers. Active and good at jumping. One of the four major freshwater-bred domestic fishes in China.`,
+
+`别名:花鲢鱼、黑鲢、鲢胖头
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:我国各大水系均有分布。
+习性:鳙喜欢生活于静水的中上层,动作较迟缓,不喜跳跃。以浮游动物为主食,亦食一些藻类。是中国淡水养殖的四大家鱼之一。<br/>
+<h3>Bighead Carp, Aristichthys nobilis</h3>
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: Several major river systems in China.
+Habits: It prefers to inhabit the middle and upper levels of still water. Moves slow and dislike jumping. Feeds mainly on zooplankton, and also a few phytoplankton. One of the four major freshwater-bred domestic fishes in China.`,
+
+`别名:武昌鱼、缩项鳊
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:主要分布于长江中、下游的中型湖泊。
+习性:武昌鱼比较适合于静水性生活。为草食性鱼类,鱼种及成鱼以苦草、轮叶黑藻、眼子菜等沉水植物为食,因此食性较广。<br/>
+<h3>Wuchang Bream, Megalobrama amblycephala</h3>
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: Mainly distributes in the middle-sized lakes in middle and lower sections of the Yangtze River.
+Habits: It relatively prefers to inhabit still water. An herbivorous fish, its fries and adults feeds broadly, mainly on submerged plants such as Vallisneria natans, Hydrilla verticillata, and Potamogeton distinctus.`,
+
+`别名:罗汉鱼
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:在我国东部地区为土著物种,在云贵高原成为外来入侵物种。
+习性:生活在浅水区。杂食,主食浮游动物,由于其吃蚊子幼虫等特性,许多国家引进其来灭蚊。<br/>
+<h3>Stone Moroko, Pseudorasbora parva</h3>
+Other Vernacular Name: Topmouth Gudgeon
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: Native to eastern China. In the Yunnan-Guizhou Plateau, it is an invasive species.
+Habits: Lives in shallow water areas. Omnivorous, mainly feeds on plankton. Introduced to many nations to control mosquitoes due to feeding the larvae.`,
+
+`别名:爬虎鱼、沙锤、花里棒子
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:分布于全国各主要水系及湖泊、沟塘中。
+习性:小型鱼类,主要生活于平原河流水清以及沙底处,主食无脊椎动物<br/>
+<h3>Chinese False Gudgeon, Abbottina rivularis</h3
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: Several major river systems, lakes, and ponds in China.
+Habits: A small fish. Mainly inhabits rivers in plain with clear water and sandy bottom. Mainly feeds on invertebrates.`,
+
+`别名:彩石鳑鲏、彩石鲋 
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:主要分布在黄河、长江等水系。
+习性:喜欢淡水湖泊和浅水有水草的地方。食植物和无脊椎动物。<br/>
+<h3>Chinses Blitterling, Rhodeus sinensis</h3>
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: Mainly distributes in the Yellow and Yangtze River Systems.
+Habits: It prefers freshwater lake and shallow water areas with grasses. Feeds on both invertebrates and plants.`,
+
+`别名:火片子、鳑鮍、鳑鮍儿
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:分布于长江以南各水系。
+习性:栖息于湖泊、池塘以及河湾水流缓慢的浅水区,是一种小杂鱼。<br/>
+<h3>Rosy Blitterling, Rhodeus ocellatus</h3>
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: Water systems south of the Yangtze River.
+Habits: It inhabits lakes, ponds, and shallow water areas in river bays with slowly flowing water. One of the small mixed fishes.`,
+
+`别名:鰕虎鱼、庐山石鱼
+分类:鲈形目Perciformes鰕虎鱼科Gobiidae
+分布:长江和珠江的南盘江水系。
+习性:底栖小型鱼类,常栖息在砂石底的山溪流水,亦在江河、湖泊的浅水区生活。<br/>
+<h3>Poper’s Goby, Ctenogobius cliffordpoperi</h3>
+Taxonomy: Order Perciformes, Family Gobiidae
+Distribution: The Yangtze River, and the Nanpan River System of the Pearl River.
+Habits: A small, benthic fish, often inhabits mountainous brooks with sandy bottom, and also lives in shallow water areas in rivers and lakes.`,
+
+`别名:普栉鰕虎鱼、子陵吻鰕虎鱼、极乐吻鰕虎
+分类:鲈形目Perciformes鰕虎鱼科Gobiidae
+分布:中国、朝鲜、日本、越南等江河水域。
+习性:栖于江河、 湖泊 、水库及池塘的沿岸浅滩。摄食小鱼、小虾、水生昆虫、水生环节动物、浮游动物及藻类等。<br/>
+<h3>Ctenogobius giurinus</h3>
+Taxonomy: Order Perciformes, Family Gobiidae
+Distribution: River areas in China, Korea, Japan, and Vietnam.
+Habits: It inhabits offshore shallow water shoals of rivers, lakes, reservoirs, and ponds. Feeds on small fishes, small shrimps, aquatic annelids, zooplankton, and algae.`,
+
+`别名:黄肚鱼、黄麻嫩
+分类:鲈形目Perciformes塘鳢科Eleotridae
+分布:广泛分布于我国湖泊等静止水体。
+习性:栖息于水体底层,为江河、湖泊常见的小型鱼类。具有攻击性,食物以小鱼、小虾为主,也吃枝角类甲壳动物。<br/>
+<h3>Hypseleotris swinhonis</h3>
+Taxonomy: Order Perciformes, Family Eleotridae
+Distribution: Widely distributed in still water bodies such as lakes in China.
+Habits: Bottom dweller, and a commonly seen small fish in rivers and lakes. Offensive. Feeds mainly on small fishes and shrimps, and also cladocerans.`,
+
+`别名:非洲鲫鱼、非鲫、越南鱼、南洋鲫
+分类:鲈形目Perciformes丽鱼科Cichlidae
+分布:原产非洲,我国目前广泛养殖。
+习性:在海水、淡水中均可生存。一般栖息于水的中上层。杂食性,常吃水中植物和碎物。<br/>
+<h3>Mozambique Tilapia, Tilapia mossambica</h3>
+Taxonomy: Order Perciformes, Family Cichlidae
+Distribution: Native to Africa, and widely bred in China.
+Habits: Can live in both salt and fresh waters. Generally inhabits middle and upper levels of water. Omnivorous, mainly feeds on plant and other debris in the water.`,
+
+`别名:小银鱼、银鱼
+分类:鲑形目Salmoniformes银鱼科Salangidae
+分布:长江中、下游的附属湖泊中,模式产地在太湖。
+习性:纯淡水的种类,终生生活于湖泊内,浮游在水的中、下层,以浮游动物为主食,也食少量的小虾和鱼苗。<br/>
+<h3>Taihu Silverfish, Neosalanx taihuensis</h3>
+Taxonomy: Order Salmoniformes, Family Salangidae
+Distribution: Affiliated lakes in the middle and lower sectors of the Yangtze River. Its type locality is the Taihu Lake.
+Habits: A pure freshwater fish, spends its entire life in the lake. Floats in the middle and lower levels of water, mainly feeds on zooplankton, and also a small amount of small shrimps and fries.`,
+
+`别名:蛇头鱼、黑鱼、乌鱼、乌棒、蛇头鱼、文鱼
+分类:鲈形目 Perciformes鳢科 Channidae
+分布:除高原地区外,主要分布于长江流域等。
+习性:为肉食性凶猛鱼类,常潜伏在水浑浊、水草丛生的浅水地带,若在水质清澈、水流缓慢或平静的地方,则多隐蔽在水草下面或静止的水层中。<br/>
+<h3>Northern Snakehead, Channa argus</h3>
+Taxonomy: Order Perciformes, Family Channidae
+Distribution: Disregarding the highlands, it mainly distributes in the Yangtze River Basin.
+Habits: A fierce predator, generally lurks in shallow water area with turbid water and dense grasses. In clear, slowly flowing, or still water areas, it often hide under the grass or stilled water layers.`,
+
+`别名:大肚鱼、柳条鱼、山坑鱼、大眼叮当、白头婆
+分类:鳉形目 Cyprinodontiformes花鳉科Poeciliidae
+分布:中国主要分布于长江以南地区的水域。
+习性:平时喜集群游动于水的表层,行动敏捷。一般以小型无脊椎动物为食,尤其喜食蚊子幼体孑孓。<br/>
+<h3>Mosquitofish, Gambusia affinis</h3>
+Other Vernacular Names: Western Mosquitofish, Gambusia, Gambezi
+Taxonomy: Order Cyprinodontiformes, Family Poeciliidae
+Distribution: In China, it mainly distributes in water areas south of the Yangtze River.
+Habits: Generally, swims in group near the water surface and swiftly moves. Usually feeds on small invertebrates, especially the wrigglers, larvae of mosquito.`,
+
+`别名:白条、䱗子、青鳞子、白鱎、克氏鱎、奇拉、奇力鱼
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:我国除青藏高原外的大部分水体均有分布。
+习性:生活于江河湖泊浅水处缓流或静水水体。属杂食性,以藻类或水生昆虫等为食。<br/>
+<h3>Sharpbelly, Hemiculter leucisculus</h3>
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: In China, it is widely distributed in many water areas except for Tibet.
+Habits: It lives in shallow, slowly flowing, or still water areas of rivers and lakes. Omnivorous, feeds on algae or aquatic insects, etc.`,
+
+`别名:黄辣丁、黄角丁、黄腊丁、黄公灵、黄牯头
+分类:鲇形目Siluriformes鲿科Bagridae
+分布:广布于中国东部各水系。
+习性:生活于江河湖泊浅水处缓流或静水水体。属杂食性,以藻类或水生昆虫等为食。<br/>
+<h3>Yellowhead Catfish, Pelteobagrus fulvidraco</h3>
+Other Vernacular Name: Korean Bullhead
+Taxonomy: Order Siluriformes, Family Bagridae
+Distribution: Widely distributed in several river systems in eastern China.
+Habits: It lives in shallow, slowly flowing, or still water areas of rivers and lakes. Omnivorous, feeds on algae or aquatic insects, etc.`,
+
+`别名:丁桂鱼、须鱼岁
+分类:鲤形目Cypriniformes鲤科Cyprinidae
+分布:原产欧洲。在洱海为引入的经济鱼类。
+习性:冷水性鱼类,生活于静水湖泊或缓流的河段。常在底层活动,杂食性,适应性较强。<br/>
+<h3>Tench, Tinca tinca</h3>
+Other Vernacular Name: Doctor Fish
+Taxonomy: Order Cypriniformes, Family Cyprinidae
+Distribution: Native to Europe. Introduced as an economical fish.
+Habits: A cold water fish. It lives in still water lake or slowly flowing sections of rivers. Generally forages at the bottom. Omnivorous, and bears a strong adaptability.`
+    ],
+    images: 27,
+  }
+]

+ 3 - 0
hot/vue.config.js

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

+ 1 - 1
web/public/index.html

@@ -48,7 +48,7 @@
     <script src="<%= VUE_APP_STATIC_DIR %>/js/main_2020_show.js"></script>
     <script src="<%= VUE_APP_STATIC_DIR %>/js/lib/OBJLoader.js"></script>
     <script src="<%= VUE_APP_STATIC_DIR %>/js/CAD/bundle.js"></script>
-    <script src="<%= VUE_APP_STATIC_DIR %>/js/loadCAD.js"></script>
+    <!-- <script src="<%= VUE_APP_STATIC_DIR %>/js/loadCAD.js"></script> -->
 </body>
 
 </html>