4 роки тому · f5ebbc37f4
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
 
				+> 1%
			
 
				+last 2 versions
			
 
				+not dead
			
--- a/.eslintrc.js
+++ b/.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'
			
 
				+  }
			
 
				+}
			
--- 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,24 @@
 
				+# code
			
 
				+
			
 
				+## 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/).
			
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,30 @@
 
				+{
			
 
				+  "name": "code",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build",
			
 
				+    "lint": "vue-cli-service lint"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "core-js": "^3.6.5",
			
 
				+    "v-viewer": "^1.6.3",
			
 
				+    "vue": "^2.6.11",
			
 
				+    "vue-router": "^3.2.0",
			
 
				+    "swiper": "^5.3.8",
			
 
				+    "vue-awesome-swiper": "^4.1.1"
			
 
				+  },
			
 
				+  "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"
			
 
				+  }
			
 
				+}
			
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="">
			
 
				+  <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">
			
 
				+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+    <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,21 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <router-view/>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import '@/assets/style/reset.less'
			
 
				+import '@/assets/style/public.less'
			
 
				+
			
 
				+export default {
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+#app {
			
 
				+ width: 100%;
			
 
				+ height: 100%;
			
 
				+}
			
 
				+
			
 
				+</style>
			
--- a/src/assets/images/-s-播放中.png
+++ b/src/assets/images/-s-播放中.png
--- a/src/assets/images/-s-旋转_
+++ b/src/assets/images/-s-旋转_
--- a/src/assets/images/-s-旋转_.png
+++ b/src/assets/images/-s-旋转_.png
--- a/src/assets/images/-s-暂停中.png
+++ b/src/assets/images/-s-暂停中.png
--- a/src/assets/images/-s-缩放-02.png
+++ b/src/assets/images/-s-缩放-02.png
--- a/src/assets/images/-s-缩放.png
+++ b/src/assets/images/-s-缩放.png
--- a/src/assets/images/G00152-1.jpg
+++ b/src/assets/images/G00152-1.jpg
--- a/src/assets/images/bg.jpg
+++ b/src/assets/images/bg.jpg
--- a/src/assets/images/bofang.png
+++ b/src/assets/images/bofang.png
--- a/src/assets/images/close.png
+++ b/src/assets/images/close.png
--- a/src/assets/images/kuang.png
+++ b/src/assets/images/kuang.png
--- a/src/assets/images/small_k.png
+++ b/src/assets/images/small_k.png
--- a/src/assets/images/title.png
+++ b/src/assets/images/title.png
--- a/src/assets/images/xinfeng_1.jpg
+++ b/src/assets/images/xinfeng_1.jpg
--- a/src/assets/images/移动
+++ b/src/assets/images/移动
--- a/src/assets/images/移动.png
+++ b/src/assets/images/移动.png
--- a/src/assets/style/public.less
+++ b/src/assets/style/public.less
@@ -0,0 +1,5 @@
 
				+html,body{
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  -webkit-overflow-scrolling: touch;
			
 
				+}
			
--- a/src/assets/style/reset.less
+++ b/src/assets/style/reset.less
@@ -0,0 +1,45 @@
 
				+/* reset */
			
 
				+html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
			
 
				+header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
			
 
				+table{border-collapse:collapse;border-spacing:0;}
			
 
				+caption,th{text-align:left;font-weight:normal;}
			
 
				+html,body,fieldset,img,iframe,abbr{border:0;}
			
 
				+i,cite,em,var,address,dfn{font-style:normal;}
			
 
				+[hidefocus],summary{outline:0;}
			
 
				+li{list-style:none;}
			
 
				+h1,h2,h3,h4,h5,h6,small{font-size:100%;}
			
 
				+sup,sub{font-size:83%;}
			
 
				+pre,code,kbd,samp{font-family:inherit;}
			
 
				+q:before,q:after{content:none;}
			
 
				+textarea{overflow:auto;resize:none;}
			
 
				+label,summary{cursor:default;}
			
 
				+a,button{cursor:pointer;}
			
 
				+h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
			
 
				+del,ins,u,s,a,a:hover{text-decoration:none;}
			
 
				+body,textarea,input,button,select,keygen,legend{font:14px/1.14;outline:0;}
			
 
				+body{background:#fff;}
			
 
				+*{box-sizing: border-box}
			
 
				+a{text-decoration: none;}
			
 
				+
			
 
				+
			
 
				+::-webkit-scrollbar {
			
 
				+  width: 2px;
			
 
				+  height: 8px;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-thumb {
			
 
				+  width: 10px;
			
 
				+  height: 10px;
			
 
				+  background-color: #B10303;
			
 
				+  -webkit-border-radius: 4px;
			
 
				+  outline: 2px solid #B10303;
			
 
				+  outline-offset: -2px;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-track{
			
 
				+  height: 50px;
			
 
				+  background-color: #CCCCCC;
			
 
				+  width: 20px;
			
 
				+  -webkit-border-radius: 4px;
			
 
				+}
			
 
				+
			
--- a/src/assets/videos/huaqiao.56afcc74.mp4
+++ b/src/assets/videos/huaqiao.56afcc74.mp4
--- a/src/data/index(4).js
+++ b/src/data/index(4).js
--- a/src/data/index(6).js
+++ b/src/data/index(6).js
--- a/src/data/index.js
+++ b/src/data/index.js
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,27 @@
 
				+import Vue from 'vue'
			
 
				+import App from './App.vue'
			
 
				+import router from './router'
			
 
				+import browser from "@/utils/browser";
			
 
				+import 'viewerjs/dist/viewer.css'
			
 
				+import Viewer from 'v-viewer'
			
 
				+Vue.use(Viewer,{
			
 
				+  defaultOptions: {
			
 
				+    toolbar: 0,
			
 
				+    title:0,
			
 
				+    navbar:false,
			
 
				+    button:false,
			
 
				+    maxZoomRatio:2,
			
 
				+    inline:true,
			
 
				+    backdrop: false
			
 
				+  }
			
 
				+})
			
 
				+
			
 
				+Vue.prototype.$browser = browser
			
 
				+Vue.prototype.$cdn = 'https://culture.4dage.com/mao/material/'
			
 
				+
			
 
				+Vue.config.productionTip = false
			
 
				+
			
 
				+new Vue({
			
 
				+  router,
			
 
				+  render: h => h(App)
			
 
				+}).$mount('#app')
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,20 @@
 
				+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
			
 
				+  }
			
 
				+]
			
 
				+
			
 
				+const router = new VueRouter({
			
 
				+  routes
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/src/utils/browser.js
+++ b/src/utils/browser.js
@@ -0,0 +1,35 @@
 
				+function versions () {
			
 
				+  var u = window.navigator.userAgent
			
 
				+  return {
			
 
				+    // IE内核
			
 
				+    trident: u.indexOf('Trident') > -1,
			
 
				+    // Firefox
			
 
				+    firefox: u.indexOf('Firefox') > -1,
			
 
				+    // edge
			
 
				+    edge: u.indexOf('Edge') > -1,
			
 
				+    // opera内核
			
 
				+    presto: u.indexOf('Presto') > -1,
			
 
				+    // 苹果、谷歌内核
			
 
				+    webKit: u.indexOf('AppleWebKit') > -1,
			
 
				+    // 火狐内核
			
 
				+    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1,
			
 
				+    // 是否为移动终端
			
 
				+    mobile: /Android|webOS|iPhone|iPod|BlackBerry/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'),
			
 
				+    // 获取浏览器语言
			
 
				+    language: (navigator.browserLanguage || navigator.language).toLowerCase()
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+export default versions()
			
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -0,0 +1,254 @@
 
				+<template>
			
 
				+  <div
			
 
				+    class="home"
			
 
				+    v-if="currentData"
			
 
				+    :style="{ 'background-image': `url(${require('@/assets/images/bg.jpg')})` }"
			
 
				+  >
			
 
				+    <div class="top">
			
 
				+      <img :src="require('@/assets/images/title.png')" alt="" />
			
 
				+    </div>
			
 
				+    <div
			
 
				+      class="body"
			
 
				+      :style="{
			
 
				+        'background-image': `url(${require('@/assets/images/kuang.png')})`,
			
 
				+      }"
			
 
				+    >
			
 
				+      <div class="title">
			
 
				+        <img :src="require('@/assets/images/small_k.png')" alt="" />
			
 
				+        <span>{{currentData.title}}</span>
			
 
				+      </div>
			
 
				+      <div class="desc" v-html="currentData.desc"> </div>
			
 
				+      <div class="con">
			
 
				+        <div class="maincon">
			
 
				+          <iframe
			
 
				+            v-if="active.type == 'model'"
			
 
				+            :src="active.url"
			
 
				+            frameborder="0"
			
 
				+          >
			
 
				+          </iframe>
			
 
				+          <div class="mimg" v-else v-swiper:mySwiper="swiperOptions">
			
 
				+            <ul class="swiper-wrapper swiper2" >
			
 
				+              <li class="swiper-slide" v-for="(item,i) in active.url" :key="i">
			
 
				+                <img :src="$cdn+`part0${query.region}/picture/${active.folder}/${item}`" alt="">
			
 
				+              </li>
			
 
				+              <div class="swiper-pagination"></div>
			
 
				+            </ul>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div class="name" v-if="currentData.wenyin" v-html="currentData.wenyin || '暂无'"></div>
			
 
				+        <div class="list" v-swiper:iSwiper="swiperOption">
			
 
				+          <div class="sw-active">{{active.name}}</div>
			
 
				+          <ul class="swiper-wrapper swiper1">
			
 
				+            <li @click="active=item" :class="{'slide-active':item.thumb==active.thumb}" class="swiper-slide" v-for="(item, i) in currentData.content" :key="i">
			
 
				+              <img :src="item.type == 'model' ? $cdn+`model/${item.thumb}`:$cdn+`part0${query.region}/picture/${item.folder}/${item.thumb}`" alt="" />
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+          <div class="swiper-pagination"></div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <p class="bottom">MAO ZHE DONG ZHUAN TI ZHAN</p>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import data from "@/data";
			
 
				+import { directive } from "vue-awesome-swiper";
			
 
				+// import style (<= Swiper 5.x)
			
 
				+import "swiper/css/swiper.css";
			
 
				+
			
 
				+export default {
			
 
				+  name: "Home",
			
 
				+  data() {
			
 
				+    return {
			
 
				+      data: data.data,
			
 
				+      query:{},
			
 
				+      currentData:'',
			
 
				+      active:''
			
 
				+    };
			
 
				+  },
			
 
				+
			
 
				+  computed:{
			
 
				+    swiperOption(){
			
 
				+      return {
			
 
				+        id:'tttt',
			
 
				+        slidesPerView: "auto",
			
 
				+        autoplay: false,
			
 
				+        direction: "horizontal"
			
 
				+      }
			
 
				+    },
			
 
				+    swiperOptions(){
			
 
				+      return {
			
 
				+        id:'qtq',
			
 
				+        slidesPerView: "auto",
			
 
				+        autoplay: false,
			
 
				+        direction: "horizontal"
			
 
				+      }
			
 
				+    },
			
 
				+  },
			
 
				+
			
 
				+  directives: {
			
 
				+    swiper: directive,
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.$nextTick(()=>{
			
 
				+      console.log(!this.$route.query.key, !this.$route.query.region);
			
 
				+      if (!this.$route.query.key||!this.$route.query.region) {
			
 
				+        alert('读取数据失败，请确认链接是否正确')
			
 
				+      }
			
 
				+
			
 
				+      this.query = this.$route.query
			
 
				+      this.currentData = this.data[this.$route.query.region][this.$route.query.key]
			
 
				+      this.active = this.currentData.content[0]
			
 
				+      console.log(this.currentData);
			
 
				+
			
 
				+    })
			
 
				+
			
 
				+    document.title = "毛泽东同志专题展";
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.home {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  background-size: cover;
			
 
				+  background-position: center center;
			
 
				+  background-repeat: no-repeat;
			
 
				+  padding: 20px 0 0;
			
 
				+  font-size: 0;
			
 
				+  .top {
			
 
				+    margin: 0 auto;
			
 
				+    width: 70%;
			
 
				+    height: 10%;
			
 
				+    > img {
			
 
				+      width: 100%;
			
 
				+    }
			
 
				+  }
			
 
				+  .body {
			
 
				+    height: 85%;
			
 
				+    width: 100%;
			
 
				+    padding: 20% 8%;
			
 
				+    background-size: 100% 100%;
			
 
				+    background-repeat: no-repeat;
			
 
				+    position: relative;
			
 
				+    font-size: 14px;
			
 
				+    .title {
			
 
				+      color: #edb25b;
			
 
				+      z-index: 999;
			
 
				+      position: absolute;
			
 
				+      top: -1%;
			
 
				+      left: 50%;
			
 
				+      transform: translateX(-50%);
			
 
				+      width: 70%;
			
 
				+      > img {
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      > span {
			
 
				+        margin: 0 auto;
			
 
				+        display: inline-block;
			
 
				+        position: absolute;
			
 
				+        width: 100%;
			
 
				+        text-align: center;
			
 
				+        top: 42%;
			
 
				+        letter-spacing: 1px;
			
 
				+        font-size: 24px;
			
 
				+        left: 50%;
			
 
				+        transform: translate(-50%, -50%);
			
 
				+      }
			
 
				+    }
			
 
				+    .desc {
			
 
				+      color: #fff;
			
 
				+      max-height: 20%;
			
 
				+      overflow-x: hidden;
			
 
				+      overflow-y: auto;
			
 
				+    }
			
 
				+    .con {
			
 
				+      width: 100%;
			
 
				+      min-height: 62%;
			
 
				+      font-size: 0;
			
 
				+      margin-top: 3%;
			
 
				+      .maincon{
			
 
				+        height: 65%;
			
 
				+        width: 100%;
			
 
				+        overflow: hidden;
			
 
				+        position: relative;
			
 
				+        background: linear-gradient(0deg, #575757, #C0C0C0);
			
 
				+        > iframe {
			
 
				+          width: 100%;
			
 
				+          height: 100%;
			
 
				+        }
			
 
				+        .mimg{
			
 
				+          width: 100%;
			
 
				+          >ul{
			
 
				+            width: 100%;
			
 
				+            >li{
			
 
				+              width: 100%;
			
 
				+              >img{
			
 
				+                width: 100%;
			
 
				+                height: 100%;
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				+          
			
 
				+        }
			
 
				+        
			
 
				+      }
			
 
				+      .name {
			
 
				+        background: #edb25b;
			
 
				+        font-size: 14px;
			
 
				+        height: 30%;
			
 
				+        padding: 2% 4%;
			
 
				+        color: #b20303;
			
 
				+        overflow-x: hidden;
			
 
				+        overflow-y: auto;
			
 
				+      }
			
 
				+      .list {
			
 
				+        width: 100%;
			
 
				+        margin-top: 12px;
			
 
				+        .sw-active{
			
 
				+          font-size: 12px;
			
 
				+          margin-bottom: 4px;
			
 
				+          color: #EDB25B;
			
 
				+        }
			
 
				+        .swiper-wrapper {
			
 
				+          width: 100%;
			
 
				+          .swiper-slide {
			
 
				+            width: 30vw;
			
 
				+            margin: 4px;
			
 
				+            height: 72px;
			
 
				+            position: relative;
			
 
				+            background: linear-gradient(0deg, #575757, #C0C0C0);
			
 
				+            overflow: hidden;
			
 
				+            &:first-of-type{
			
 
				+              margin-left: 0;
			
 
				+            }
			
 
				+            > img {
			
 
				+              position: absolute;
			
 
				+              top: 50%;
			
 
				+              left: 50%;
			
 
				+              transform: translate(-50%,-50%);
			
 
				+              height: 100%;
			
 
				+              width: 100%;
			
 
				+            }
			
 
				+          }
			
 
				+
			
 
				+          .slide-active{
			
 
				+            color: #EDB25B;
			
 
				+            border: 2px solid #EDB25B;
			
 
				+            border-radius: 4px;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .bottom {
			
 
				+    height: 5%;
			
 
				+    width: 100%;
			
 
				+    text-align: center;
			
 
				+    color: #c9a062;
			
 
				+    font-size: 10px;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/model.vue
+++ b/src/views/model.vue
@@ -0,0 +1,323 @@
 
				+<template>
			
 
				+  <div class="home">
			
 
				+    <img class="bg" :src="require(`@/assets/images/${$browser.mobile?'mbbg.png':'bg.jpg'}`)" alt="">
			
 
				+    <div class="header">
			
 
				+      <img :src="require('@/assets/images/title_img.png')" alt="">
			
 
				+      <p>{{data.title}}</p>
			
 
				+    </div>
			
 
				+    
			
 
				+    <ul class="main">
			
 
				+      <li v-for="(item,i) in data.content" :key="i" @click="handleItem(item)">
			
 
				+        <img  class="li_bg" :src="require('@/assets/images/li_bg.png')" alt="">
			
 
				+        <div class="img_con">
			
 
				+            <img class="img" :src="require(`@/assets/images/${item.img}`)" alt="">
			
 
				+            <img v-if="item.type=='video'" class="bofang" :src="require('@/assets/images/bofang.png')" alt="">
			
 
				+        </div>
			
 
				+        <span>{{item.name}}</span>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+
			
 
				+    <!-- <template v-if="viewer">
			
 
				+      <div class="mask"></div>
			
 
				+      <img class="close" @click="viewer.hidden(),viewer=''" :src="require(`@/assets/images/close.png`)" alt="">
			
 
				+    </template> -->
			
 
				+
			
 
				+    <div class="hover" v-if="active">
			
 
				+      <div class="mask"></div>
			
 
				+      <img class="close" @click="active=''" :src="require(`@/assets/images/close.png`)" alt="">
			
 
				+      <div class="hbody">
			
 
				+        <iframe v-if="active.type == 'model'" allowfullscreen :src="active.val" frameborder="0"></iframe>
			
 
				+        <video autoplay v-else-if="active.type == 'video'" controlslist="nodownload" :disablePictureInPicture="true" :src="require(`@/assets/videos/${active.val}`)" controls></video>
			
 
				+        <img class="img" v-else :src="require(`@/assets/images/${active.val}`)" alt="">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import data from '@/data'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'Home',
			
 
				+  data(){
			
 
				+    return {
			
 
				+      active:'',
			
 
				+      viewer:''
			
 
				+    }
			
 
				+  },
			
 
				+  mounted(){
			
 
				+    document.title = this.data.title
			
 
				+  },
			
 
				+  methods:{
			
 
				+    handleItem(item){
			
 
				+      // if (item.type=="video") {
			
 
				+        this.active = item
			
 
				+      // }
			
 
				+      // else{
			
 
				+      //   this.viewer = this.$viewerApi({
			
 
				+      //     images: [require(`@/assets/images/${item.img||item.val}`)]
			
 
				+      //   })
			
 
				+      //   this.viewer.show()
			
 
				+      // }
			
 
				+    }
			
 
				+  },
			
 
				+  computed:{
			
 
				+    data(){
			
 
				+      return data.data.find(item=>this.$route.params.id == item.id)
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.home{
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  position: relative;
			
 
				+  padding-top: 40px;
			
 
				+  overflow: hidden;
			
 
				+  &::before{
			
 
				+    position: absolute;
			
 
				+    content: '';
			
 
				+    display: inline-block;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    width: 100%;
			
 
				+    z-index: -1;
			
 
				+    height: 100%;
			
 
				+    background: rgba(59, 59, 59, 0.37);
			
 
				+  }
			
 
				+  .bg{
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    z-index: -2;
			
 
				+  }
			
 
				+  
			
 
				+  .header{
			
 
				+    width: 100%;
			
 
				+    text-align: left;
			
 
				+    margin-bottom: 80px;
			
 
				+    >img{
			
 
				+      width: 300px;
			
 
				+      margin: 0 auto;
			
 
				+      margin-left: 38px;
			
 
				+    }
			
 
				+    >p{
			
 
				+      height: 40px;
			
 
				+      line-height: 40px;
			
 
				+      font-size: 40px;
			
 
				+      font-weight: 400;
			
 
				+      color: #FFFFFF;
			
 
				+      letter-spacing: 6px;
			
 
				+      text-align: center;
			
 
				+      margin-top: 40px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .main{
			
 
				+    width: 80%;
			
 
				+    margin: 40px auto 0;
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    max-height: 70vh;
			
 
				+    overflow-x: hidden;
			
 
				+    overflow-y: auto;
			
 
				+    @gap:100px;
			
 
				+    >li{
			
 
				+      width: calc((100% - @gap*2) / 3);
			
 
				+      margin-right: @gap;
			
 
				+      margin-bottom: @gap;
			
 
				+      position: relative;
			
 
				+      cursor: pointer;
			
 
				+      height: 300px;
			
 
				+      &:nth-of-type(3n){
			
 
				+        margin-right: 0;
			
 
				+      }
			
 
				+      .li_bg{
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+        position: absolute;
			
 
				+        top: 0;        
			
 
				+        left: 0;
			
 
				+        z-index: -1;
			
 
				+      }
			
 
				+      .img_con{
			
 
				+        height: calc(100% - 100px);
			
 
				+        max-width:  calc(100% - 80px);
			
 
				+        overflow: hidden;
			
 
				+        position: relative;
			
 
				+        margin: 24px auto 0;
			
 
				+        text-align: center;
			
 
				+        .img{
			
 
				+          width: 100%;
			
 
				+          height: 100%;
			
 
				+        }
			
 
				+        .bofang{
			
 
				+          position: absolute;
			
 
				+          top: 50%;
			
 
				+          left: 50%;
			
 
				+          width: 85px;
			
 
				+          transform: translate(-50%,-50%);
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      >span{
			
 
				+        display: inline-block;
			
 
				+        width: 100%;
			
 
				+        text-align: center;
			
 
				+        color: #4D4D4D;
			
 
				+        margin-top: 18px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .close{
			
 
				+    position: absolute;
			
 
				+    right: 20px;
			
 
				+    top: 20px;
			
 
				+    max-width: 80px;
			
 
				+    cursor: pointer;
			
 
				+    z-index: 99999;
			
 
				+  }
			
 
				+
			
 
				+  .mask{
			
 
				+    background: rgba(0, 0, 0, 0.5);
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+  }
			
 
				+
			
 
				+  .hover{
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    position: fixed;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    font-size: 0;
			
 
				+    
			
 
				+    .hbody{
			
 
				+      width: 60%;
			
 
				+      position: absolute;
			
 
				+      top: 50%;
			
 
				+      left: 50%;
			
 
				+      transform: translate(-50%,-50%);
			
 
				+      >video,>img{
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      >iframe{
			
 
				+        width: 100%;
			
 
				+        min-height: 70vh;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+@media screen and (max-width: 800px) {
			
 
				+  .home{
			
 
				+  .header{
			
 
				+    width: 100%;
			
 
				+    text-align: center;
			
 
				+    margin-bottom: 0;
			
 
				+    height: 140px;
			
 
				+    >img{
			
 
				+      width: 50%;
			
 
				+      margin-left: 0;
			
 
				+    }
			
 
				+    >p{
			
 
				+      height: auto;
			
 
				+      line-height: 1.5;
			
 
				+      font-size: 18px;
			
 
				+      font-weight: 400;
			
 
				+      color: #FFFFFF;
			
 
				+      letter-spacing: 1px;
			
 
				+      text-align: center;
			
 
				+      width: 80%;
			
 
				+      margin: 20px auto 0;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+   .close{
			
 
				+      max-width: 30px;
			
 
				+    }
			
 
				+
			
 
				+  .main{
			
 
				+    width: 82%;
			
 
				+    height: calc(100% - 160px);
			
 
				+    margin: 20px auto 0;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    max-height: unset;
			
 
				+    flex-wrap: inherit;
			
 
				+    overflow-x: hidden;
			
 
				+    overflow-y: auto;
			
 
				+    &::-webkit-scrollbar{
			
 
				+      width:0px!important;
			
 
				+      display: none;
			
 
				+      height:0px;
			
 
				+    }
			
 
				+    >li{
			
 
				+      width: 100%;
			
 
				+      height: auto;
			
 
				+      margin: 0 auto;
			
 
				+      position: relative;
			
 
				+      cursor: pointer;
			
 
				+      padding: 5% 10%;
			
 
				+      .li_bg{
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        left: 0;
			
 
				+        z-index: -1;
			
 
				+      }
			
 
				+      .img_con{
			
 
				+        max-width: 100%;
			
 
				+        height: auto;
			
 
				+        overflow: hidden;
			
 
				+        position: relative;
			
 
				+        margin: 0 auto;
			
 
				+        text-align: center;
			
 
				+        .img{
			
 
				+          width: 100%;
			
 
				+          height: auto;
			
 
				+        }
			
 
				+        .bofang{
			
 
				+          position: absolute;
			
 
				+          top: 50%;
			
 
				+          left: 50%;
			
 
				+          width: 65px;
			
 
				+          transform: translate(-50%,-50%);
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      >span{
			
 
				+        display: inline-block;
			
 
				+        width: 100%;
			
 
				+        text-align: left;
			
 
				+        color: #6F5C43;
			
 
				+        padding-bottom: 10px;
			
 
				+        margin-top: 10px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .hover{
			
 
				+    .hbody{
			
 
				+      width: 100%;
			
 
				+      font-size: 0;
			
 
				+      >video,>img{
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      >iframe{
			
 
				+        width: 100%;
			
 
				+        height: 100vh;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+}
			
 
				+</style>
			
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,4 @@
 
				+
			
 
				+module.exports = {
			
 
				+  publicPath: "./",
			
 
				+};