4 년 전 · b51a82ec7b
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
 
				   },
			
 
				   "dependencies": {
			
 
				     "core-js": "^3.6.5",
			
 
				+    "v-viewer": "^1.6.3",
			
 
				     "vue": "^2.6.11",
			
 
				     "vue-router": "^3.2.0"
			
 
				   },
			
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
 
				     <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><%= htmlWebpackPlugin.options.title %></title>
			
 
				+    <title>银信乡音</title>
			
 
				   </head>
			
 
				   <body>
			
 
				     <noscript>
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,21 @@
 
				 <template>
			
 
				   <div id="app">
			
 
				-    <div id="nav">
			
 
				-      <router-link to="/">Home</router-link> |
			
 
				-      <router-link to="/about">About</router-link>
			
 
				-    </div>
			
 
				     <router-view/>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				+<script>
			
 
				+import '@/assets/style/reset.less'
			
 
				+import '@/assets/style/public.less'
			
 
				+
			
 
				+export default {
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				 <style lang="less">
			
 
				 #app {
			
 
				-  font-family: Avenir, Helvetica, Arial, sans-serif;
			
 
				-  -webkit-font-smoothing: antialiased;
			
 
				-  -moz-osx-font-smoothing: grayscale;
			
 
				-  text-align: center;
			
 
				-  color: #2c3e50;
			
 
				+ width: 100%;
			
 
				+ height: 100%;
			
 
				 }
			
 
				 
			
 
				-#nav {
			
 
				-  padding: 30px;
			
 
				-
			
 
				-  a {
			
 
				-    font-weight: bold;
			
 
				-    color: #2c3e50;
			
 
				-
			
 
				-    &.router-link-exact-active {
			
 
				-      color: #42b983;
			
 
				-    }
			
 
				-  }
			
 
				-}
			
 
				 </style>
			
--- a/src/assets/images/DSC_23461@2x.png
+++ b/src/assets/images/DSC_23461@2x.png
--- a/src/assets/images/DSC_2349@2x.png
+++ b/src/assets/images/DSC_2349@2x.png
--- a/src/assets/images/DSC_2355@2x.png
+++ b/src/assets/images/DSC_2355@2x.png
--- a/src/assets/images/DSC_2361@2x.png
+++ b/src/assets/images/DSC_2361@2x.png
--- 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/item_bg.png
+++ b/src/assets/images/item_bg.png
--- a/src/assets/images/li_bg.png
+++ b/src/assets/images/li_bg.png
--- a/src/assets/images/mbbg.png
+++ b/src/assets/images/mbbg.png
--- a/src/assets/images/post1.jpg
+++ b/src/assets/images/post1.jpg
--- a/src/assets/images/title_img.png
+++ b/src/assets/images/title_img.png
--- a/src/assets/images/xinfeng_1.jpg
+++ b/src/assets/images/xinfeng_1.jpg
--- a/src/assets/logo.png
+++ b/src/assets/logo.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,43 @@
 
				+/* 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 {
			
 
				+  height: 50px;
			
 
				+  background-color: #ddd;
			
 
				+  -webkit-border-radius: 4px;
			
 
				+  outline: 2px solid #fff;
			
 
				+  outline-offset: -2px;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-thumb:hover {
			
 
				+  height: 50px;
			
 
				+  background-color: #9f9f9f;
			
 
				+  -webkit-border-radius: 4px;
			
 
				+}
			
 
				+
			
--- a/src/assets/videos/huaqiao.56afcc74.mp4
+++ b/src/assets/videos/huaqiao.56afcc74.mp4
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,59 +0,0 @@
 
				-<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>
			
--- a/src/data/index.js
+++ b/src/data/index.js
@@ -0,0 +1,56 @@
 
				+let modelUrl = 'https://4dscene.4dage.com/culturalrelics/WYDX/Model.html?m='
			
 
				+
			
 
				+const data = [
			
 
				+  {
			
 
				+    id:1,
			
 
				+    img:'DSC_23461@2x.png',
			
 
				+    title:'1918年，一位美国华侨竟然在家书中这样要求他的孩子们',
			
 
				+    content:[{
			
 
				+      id:1,
			
 
				+      name:'信封展示',
			
 
				+      val: modelUrl + 'xinfeng_1',
			
 
				+      img:'DSC_23461@2x.png',
			
 
				+      type:'model'
			
 
				+    },{
			
 
				+      id:2,
			
 
				+      name:'家书展示',
			
 
				+      val: modelUrl + 'xin_2',
			
 
				+      img:'DSC_2361@2x.png',
			
 
				+      type:'model'
			
 
				+    },{
			
 
				+      id:3,
			
 
				+      name:'视频解析',
			
 
				+      val:'huaqiao.mp4',
			
 
				+      img:'DSC_23461@2x.png',
			
 
				+      type:'video'
			
 
				+    }]
			
 
				+  },
			
 
				+  {
			
 
				+    id:2,
			
 
				+    img:'DSC_2349@2x.png',
			
 
				+    title:'1953年，一位印尼华侨女生这样看新中国',
			
 
				+    content:[{
			
 
				+      id:1,
			
 
				+      name:'信封展示',
			
 
				+      img:'DSC_2349@2x.png',
			
 
				+      val: modelUrl + 'xinfeng_2',
			
 
				+      type:'model'
			
 
				+    },{
			
 
				+      id:2,
			
 
				+      name:'家书展示',
			
 
				+      img:'DSC_2355@2x.png',
			
 
				+      val: modelUrl + 'xin_1',
			
 
				+      type:'model'
			
 
				+    },{
			
 
				+      id:3,
			
 
				+      name:'视频解析',
			
 
				+      val:'huaqiao.mp4',
			
 
				+      img:'post1.jpg',
			
 
				+      type:'video'
			
 
				+    }]
			
 
				+  }
			
 
				+]
			
 
				+
			
 
				+export default {
			
 
				+  data
			
 
				+}
			
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,22 @@
 
				 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.config.productionTip = false
			
 
				 
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,8 @@
 
				 import Vue from 'vue'
			
 
				 import VueRouter from 'vue-router'
			
 
				 import Home from '../views/Home.vue'
			
 
				+import Model from '../views/model.vue'
			
 
				+
			
 
				 
			
 
				 Vue.use(VueRouter)
			
 
				 
			
@@ -11,12 +13,9 @@ const routes = [
 
				     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')
			
 
				+    path: '/model/:id',
			
 
				+    name: 'model',
			
 
				+    component: Model
			
 
				   }
			
 
				 ]
			
 
				 
			
--- 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/About.vue
+++ b/src/views/About.vue
@@ -1,5 +0,0 @@
 
				-<template>
			
 
				-  <div class="about">
			
 
				-    <h1>This is an about page</h1>
			
 
				-  </div>
			
 
				-</template>
			
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,18 +1,150 @@
 
				 <template>
			
 
				   <div class="home">
			
 
				-    <img alt="Vue logo" src="../assets/logo.png">
			
 
				-    <HelloWorld msg="Welcome to Your Vue.js App"/>
			
 
				+    <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="">
			
 
				+    </div>
			
 
				+    
			
 
				+    <ul class="main">
			
 
				+      <li @click="$router.push({name:'model',params:{id:item.id}})" v-for="(item,i) in data" :key="i">
			
 
				+        <img class="li_bg" :src="require('@/assets/images/item_bg.png')" alt="">
			
 
				+        <img class="img" :src="require(`@/assets/images/${item.img}`)" alt="">
			
 
				+      </li>
			
 
				+    </ul>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				-// @ is an alias to /src
			
 
				-import HelloWorld from '@/components/HelloWorld.vue'
			
 
				+
			
 
				+import data from '@/data'
			
 
				 
			
 
				 export default {
			
 
				   name: 'Home',
			
 
				-  components: {
			
 
				-    HelloWorld
			
 
				+  data(){
			
 
				+    return {
			
 
				+      data: data.data
			
 
				+    }
			
 
				+  },
			
 
				+  mounted(){
			
 
				+    document.title = '银信乡音'
			
 
				   }
			
 
				 }
			
 
				 </script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.home{
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  position: relative;
			
 
				+  padding-top: 40px;
			
 
				+  overflow: hidden;
			
 
				+  .bg{
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    z-index: -1;
			
 
				+  }
			
 
				+  .header{
			
 
				+    width: 100%;
			
 
				+    text-align: center;
			
 
				+    >img{
			
 
				+      width: 420px;
			
 
				+      margin: 0 auto;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .main{
			
 
				+    width: 80%;
			
 
				+    margin: 40px auto 0;
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    max-height: 70vh;
			
 
				+    overflow-x: hidden;
			
 
				+    overflow-y: auto;
			
 
				+    @gap:40px;
			
 
				+    >li{
			
 
				+      width: calc((100% - @gap*2) / 3);
			
 
				+      margin-right: @gap;
			
 
				+      margin-bottom: @gap;
			
 
				+      position: relative;
			
 
				+      max-width: 435px;
			
 
				+      cursor: pointer;
			
 
				+      &:nth-of-type(3n){
			
 
				+        margin-right: 0;
			
 
				+      }
			
 
				+      .li_bg{
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      .img{
			
 
				+        height: calc(100% - 70px);
			
 
				+        max-width: calc(100% - 80px);
			
 
				+        position: absolute;
			
 
				+        top: 48%;
			
 
				+        left: 50%;
			
 
				+        border-radius: 5px;
			
 
				+        transform: translate(-50%,-50%);
			
 
				+      }
			
 
				+
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 800px) {
			
 
				+    .home{
			
 
				+      .bg{
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+        position: absolute;
			
 
				+        top: unset;
			
 
				+        left: unset;
			
 
				+        bottom: 0;
			
 
				+        right: 0;
			
 
				+        z-index: -1;
			
 
				+      }
			
 
				+      .header{
			
 
				+        height: 70px;
			
 
				+        >img{
			
 
				+          width: 50%;
			
 
				+          margin: 0 auto;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .main{
			
 
				+        width: 82%;
			
 
				+        height: calc(100% - 100px);
			
 
				+        margin: 20px auto 0;
			
 
				+        display: flex;
			
 
				+        flex-direction: column;
			
 
				+        max-height: unset;
			
 
				+        flex-wrap: inherit;
			
 
				+        overflow-x: hidden;
			
 
				+        overflow-y: auto;
			
 
				+        @gap:40px;
			
 
				+        >li{
			
 
				+          width: 100%;
			
 
				+          margin-right: 0;
			
 
				+          margin-bottom: 0;
			
 
				+          position: relative;
			
 
				+          max-width: 100%;
			
 
				+          cursor: pointer;
			
 
				+          &:nth-of-type(3n){
			
 
				+            margin-right: 0;
			
 
				+          }
			
 
				+          .li_bg{
			
 
				+            width: 100%;
			
 
				+          }
			
 
				+          .img{
			
 
				+            height: 80%;
			
 
				+            max-width: 80%;
			
 
				+            position: absolute;
			
 
				+            top: 48%;
			
 
				+            left: 50%;
			
 
				+            transform: translate(-50%,-50%);
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+}
			
 
				+</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: "./",
			
 
				+};