пре 4 година · f549b3b0f7
--- 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,21 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,24 @@
 
				+# ksf_project
			
 
				+
			
 
				+## 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,31 @@
 
				+{
			
 
				+  "name": "ksf_project",
			
 
				+  "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.4",
			
 
				+    "jsonp": "^0.2.1",
			
 
				+    "swiper": "^5.3.8",
			
 
				+    "vue": "^2.6.11",
			
 
				+    "vue-awesome-swiper": "^4.1.1",
			
 
				+    "vue-router": "^3.1.6",
			
 
				+    "weixin-js-sdk": "^1.6.0"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "~4.3.0",
			
 
				+    "@vue/cli-plugin-eslint": "~4.3.0",
			
 
				+    "@vue/cli-plugin-router": "~4.3.0",
			
 
				+    "@vue/cli-service": "~4.3.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,28 @@
 
				+<!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,maximum-scale=1.0,user-scalable=0">
			
 
				+    <link rel="icon" href="https://4d-tjw.oss-cn-shenzhen.aliyuncs.com/uic/logo.png">
			
 
				+    <title>UIC全景校园 UIC Virtual Tour</title>
			
 
				+    <script>
			
 
				+      var _hmt = _hmt || [];
			
 
				+      (function() {
			
 
				+        var hm = document.createElement("script");
			
 
				+        hm.src = "https://hm.baidu.com/hm.js?58f758ea1b5b8cb51fa47e10587cda3c";
			
 
				+        var s = document.getElementsByTagName("script")[0]; 
			
 
				+        s.parentNode.insertBefore(hm, s);
			
 
				+      })();
			
 
				+    </script>
			
 
				+      
			
 
				+      
			
 
				+  </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,101 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <router-view/>
			
 
				+    <!-- <audio
			
 
				+      class="audio"
			
 
				+      id="audio1"
			
 
				+      :src="`${$cdn}audio/bg.mp3`"
			
 
				+      preload
			
 
				+      loop
			
 
				+      ref="musicBg"
			
 
				+    ></audio> -->
			
 
				+
			
 
				+  </div>
			
 
				+  
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import '@/assets/css/reset.less'
			
 
				+import '@/assets/css/public.less'
			
 
				+import '@/assets/fonts/iconfont.css'
			
 
				+import wx from 'weixin-js-sdk'
			
 
				+import jsonp from 'jsonp'
			
 
				+
			
 
				+export default {
			
 
				+  methods:{
			
 
				+    // handleAudio(val){
			
 
				+    //   val ? this.$refs.musicBg.play() : this.$refs.musicBg.pause();
			
 
				+    // },
			
 
				+    wxShare () {
			
 
				+      let url = location.href.split('#')[0]
			
 
				+      jsonp('https://www.4dage.com/wechat/jssdk/share/?uri=' +
			
 
				+  window.escape(url) + '&name=淇澳端午巡游', 'success_jsonp', function (err, data) {
			
 
				+        if (err) {
			
 
				+          console.err(err)
			
 
				+        } else {
			
 
				+          wx.config({
			
 
				+            debug: false, // 开启调试模式
			
 
				+            appId: data.appId,
			
 
				+            timestamp: data.timestamp,
			
 
				+            nonceStr: data.nonceStr,
			
 
				+            signature: data.signature,
			
 
				+            jsApiList: ['checkJsApi',
			
 
				+              'onMenuShareTimeline',
			
 
				+              'onMenuShareAppMessage',
			
 
				+              'onMenuShareQQ',
			
 
				+              'onMenuShareWeibo',
			
 
				+              'hideMenuItems',
			
 
				+              'showMenuItems',
			
 
				+              'hideAllNonBaseMenuItem',
			
 
				+              'showAllNonBaseMenuItem',
			
 
				+              'translateVoice',
			
 
				+              'startRecord',
			
 
				+              'stopRecord',
			
 
				+              'onRecordEnd',
			
 
				+              'playVoice',
			
 
				+              'pauseVoice',
			
 
				+              'stopVoice',
			
 
				+              'uploadVoice',
			
 
				+              'downloadVoice']
			
 
				+          })
			
 
				+        }
			
 
				+        wx.ready(function () {
			
 
				+          var shareData = {
			
 
				+            title: 'UIC全景校园 UIC Virtual Tour', //  标题
			
 
				+            desc: 'UIC全景校园 UIC Virtual Tour', //  描述
			
 
				+            link: window.location.href, //  分享的URL，必须和当前打开的网页的URL是一样的
			
 
				+            imgUrl: 'https://houseoss.4dkankan.com/uic/logo.png', //  缩略图地址
			
 
				+            success: function () {
			
 
				+
			
 
				+            },
			
 
				+            cancel: function () {
			
 
				+
			
 
				+            }
			
 
				+          }
			
 
				+          wx.onMenuShareAppMessage(shareData)
			
 
				+          wx.onMenuShareTimeline(shareData)
			
 
				+          wx.onMenuShareQQ(shareData)
			
 
				+          wx.onMenuShareQZone(shareData)
			
 
				+        })
			
 
				+      })
			
 
				+    }
			
 
				+  },
			
 
				+  mounted () {
			
 
				+      this.wxShare()
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+#app{
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+  .audio {
			
 
				+    position: fixed;
			
 
				+    top: -100px;
			
 
				+    left: -100px;
			
 
				+    opacity: 0;
			
 
				+  }
			
 
				+</style>
			
--- a/src/assets/css/public.less
+++ b/src/assets/css/public.less
@@ -0,0 +1,8 @@
 
				+html,body{
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+*{
			
 
				+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			
 
				+  tap-highlight-color: rgba(0, 0, 0, 0);
			
 
				+}
			
--- a/src/assets/css/reset.less
+++ b/src/assets/css/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: 8px;
			
 
				+  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/fonts/FZCY.ttf
+++ b/src/assets/fonts/FZCY.ttf
--- a/src/assets/fonts/FZZY.TTF
+++ b/src/assets/fonts/FZZY.TTF
--- a/src/assets/fonts/demo.css
+++ b/src/assets/fonts/demo.css
@@ -0,0 +1,539 @@
 
				+/* Logo 字体 */
			
 
				+@font-face {
			
 
				+  font-family: "iconfont logo";
			
 
				+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
			
 
				+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
			
 
				+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
			
 
				+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
			
 
				+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
			
 
				+}
			
 
				+
			
 
				+.logo {
			
 
				+  font-family: "iconfont logo";
			
 
				+  font-size: 160px;
			
 
				+  font-style: normal;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+}
			
 
				+
			
 
				+/* tabs */
			
 
				+.nav-tabs {
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+.nav-tabs .nav-more {
			
 
				+  position: absolute;
			
 
				+  right: 0;
			
 
				+  bottom: 0;
			
 
				+  height: 42px;
			
 
				+  line-height: 42px;
			
 
				+  color: #666;
			
 
				+}
			
 
				+
			
 
				+#tabs {
			
 
				+  border-bottom: 1px solid #eee;
			
 
				+}
			
 
				+
			
 
				+#tabs li {
			
 
				+  cursor: pointer;
			
 
				+  width: 100px;
			
 
				+  height: 40px;
			
 
				+  line-height: 40px;
			
 
				+  text-align: center;
			
 
				+  font-size: 16px;
			
 
				+  border-bottom: 2px solid transparent;
			
 
				+  position: relative;
			
 
				+  z-index: 1;
			
 
				+  margin-bottom: -1px;
			
 
				+  color: #666;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+#tabs .active {
			
 
				+  border-bottom-color: #f00;
			
 
				+  color: #222;
			
 
				+}
			
 
				+
			
 
				+.tab-container .content {
			
 
				+  display: none;
			
 
				+}
			
 
				+
			
 
				+/* 页面布局 */
			
 
				+.main {
			
 
				+  padding: 30px 100px;
			
 
				+  width: 960px;
			
 
				+  margin: 0 auto;
			
 
				+}
			
 
				+
			
 
				+.main .logo {
			
 
				+  color: #333;
			
 
				+  text-align: left;
			
 
				+  margin-bottom: 30px;
			
 
				+  line-height: 1;
			
 
				+  height: 110px;
			
 
				+  margin-top: -50px;
			
 
				+  overflow: hidden;
			
 
				+  *zoom: 1;
			
 
				+}
			
 
				+
			
 
				+.main .logo a {
			
 
				+  font-size: 160px;
			
 
				+  color: #333;
			
 
				+}
			
 
				+
			
 
				+.helps {
			
 
				+  margin-top: 40px;
			
 
				+}
			
 
				+
			
 
				+.helps pre {
			
 
				+  padding: 20px;
			
 
				+  margin: 10px 0;
			
 
				+  border: solid 1px #e7e1cd;
			
 
				+  background-color: #fffdef;
			
 
				+  overflow: auto;
			
 
				+}
			
 
				+
			
 
				+.icon_lists {
			
 
				+  width: 100% !important;
			
 
				+  overflow: hidden;
			
 
				+  *zoom: 1;
			
 
				+}
			
 
				+
			
 
				+.icon_lists li {
			
 
				+  width: 100px;
			
 
				+  margin-bottom: 10px;
			
 
				+  margin-right: 20px;
			
 
				+  text-align: center;
			
 
				+  list-style: none !important;
			
 
				+  cursor: default;
			
 
				+}
			
 
				+
			
 
				+.icon_lists li .code-name {
			
 
				+  line-height: 1.2;
			
 
				+}
			
 
				+
			
 
				+.icon_lists .icon {
			
 
				+  display: block;
			
 
				+  height: 100px;
			
 
				+  line-height: 100px;
			
 
				+  font-size: 42px;
			
 
				+  margin: 10px auto;
			
 
				+  color: #333;
			
 
				+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
			
 
				+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
			
 
				+  transition: font-size 0.25s linear, width 0.25s linear;
			
 
				+}
			
 
				+
			
 
				+.icon_lists .icon:hover {
			
 
				+  font-size: 100px;
			
 
				+}
			
 
				+
			
 
				+.icon_lists .svg-icon {
			
 
				+  /* 通过设置 font-size 来改变图标大小 */
			
 
				+  width: 1em;
			
 
				+  /* 图标和文字相邻时，垂直对齐 */
			
 
				+  vertical-align: -0.15em;
			
 
				+  /* 通过设置 color 来改变 SVG 的颜色/fill */
			
 
				+  fill: currentColor;
			
 
				+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
			
 
				+      normalize.css 中也包含这行 */
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.icon_lists li .name,
			
 
				+.icon_lists li .code-name {
			
 
				+  color: #666;
			
 
				+}
			
 
				+
			
 
				+/* markdown 样式 */
			
 
				+.markdown {
			
 
				+  color: #666;
			
 
				+  font-size: 14px;
			
 
				+  line-height: 1.8;
			
 
				+}
			
 
				+
			
 
				+.highlight {
			
 
				+  line-height: 1.5;
			
 
				+}
			
 
				+
			
 
				+.markdown img {
			
 
				+  vertical-align: middle;
			
 
				+  max-width: 100%;
			
 
				+}
			
 
				+
			
 
				+.markdown h1 {
			
 
				+  color: #404040;
			
 
				+  font-weight: 500;
			
 
				+  line-height: 40px;
			
 
				+  margin-bottom: 24px;
			
 
				+}
			
 
				+
			
 
				+.markdown h2,
			
 
				+.markdown h3,
			
 
				+.markdown h4,
			
 
				+.markdown h5,
			
 
				+.markdown h6 {
			
 
				+  color: #404040;
			
 
				+  margin: 1.6em 0 0.6em 0;
			
 
				+  font-weight: 500;
			
 
				+  clear: both;
			
 
				+}
			
 
				+
			
 
				+.markdown h1 {
			
 
				+  font-size: 28px;
			
 
				+}
			
 
				+
			
 
				+.markdown h2 {
			
 
				+  font-size: 22px;
			
 
				+}
			
 
				+
			
 
				+.markdown h3 {
			
 
				+  font-size: 16px;
			
 
				+}
			
 
				+
			
 
				+.markdown h4 {
			
 
				+  font-size: 14px;
			
 
				+}
			
 
				+
			
 
				+.markdown h5 {
			
 
				+  font-size: 12px;
			
 
				+}
			
 
				+
			
 
				+.markdown h6 {
			
 
				+  font-size: 12px;
			
 
				+}
			
 
				+
			
 
				+.markdown hr {
			
 
				+  height: 1px;
			
 
				+  border: 0;
			
 
				+  background: #e9e9e9;
			
 
				+  margin: 16px 0;
			
 
				+  clear: both;
			
 
				+}
			
 
				+
			
 
				+.markdown p {
			
 
				+  margin: 1em 0;
			
 
				+}
			
 
				+
			
 
				+.markdown>p,
			
 
				+.markdown>blockquote,
			
 
				+.markdown>.highlight,
			
 
				+.markdown>ol,
			
 
				+.markdown>ul {
			
 
				+  width: 80%;
			
 
				+}
			
 
				+
			
 
				+.markdown ul>li {
			
 
				+  list-style: circle;
			
 
				+}
			
 
				+
			
 
				+.markdown>ul li,
			
 
				+.markdown blockquote ul>li {
			
 
				+  margin-left: 20px;
			
 
				+  padding-left: 4px;
			
 
				+}
			
 
				+
			
 
				+.markdown>ul li p,
			
 
				+.markdown>ol li p {
			
 
				+  margin: 0.6em 0;
			
 
				+}
			
 
				+
			
 
				+.markdown ol>li {
			
 
				+  list-style: decimal;
			
 
				+}
			
 
				+
			
 
				+.markdown>ol li,
			
 
				+.markdown blockquote ol>li {
			
 
				+  margin-left: 20px;
			
 
				+  padding-left: 4px;
			
 
				+}
			
 
				+
			
 
				+.markdown code {
			
 
				+  margin: 0 3px;
			
 
				+  padding: 0 5px;
			
 
				+  background: #eee;
			
 
				+  border-radius: 3px;
			
 
				+}
			
 
				+
			
 
				+.markdown strong,
			
 
				+.markdown b {
			
 
				+  font-weight: 600;
			
 
				+}
			
 
				+
			
 
				+.markdown>table {
			
 
				+  border-collapse: collapse;
			
 
				+  border-spacing: 0px;
			
 
				+  empty-cells: show;
			
 
				+  border: 1px solid #e9e9e9;
			
 
				+  width: 95%;
			
 
				+  margin-bottom: 24px;
			
 
				+}
			
 
				+
			
 
				+.markdown>table th {
			
 
				+  white-space: nowrap;
			
 
				+  color: #333;
			
 
				+  font-weight: 600;
			
 
				+}
			
 
				+
			
 
				+.markdown>table th,
			
 
				+.markdown>table td {
			
 
				+  border: 1px solid #e9e9e9;
			
 
				+  padding: 8px 16px;
			
 
				+  text-align: left;
			
 
				+}
			
 
				+
			
 
				+.markdown>table th {
			
 
				+  background: #F7F7F7;
			
 
				+}
			
 
				+
			
 
				+.markdown blockquote {
			
 
				+  font-size: 90%;
			
 
				+  color: #999;
			
 
				+  border-left: 4px solid #e9e9e9;
			
 
				+  padding-left: 0.8em;
			
 
				+  margin: 1em 0;
			
 
				+}
			
 
				+
			
 
				+.markdown blockquote p {
			
 
				+  margin: 0;
			
 
				+}
			
 
				+
			
 
				+.markdown .anchor {
			
 
				+  opacity: 0;
			
 
				+  transition: opacity 0.3s ease;
			
 
				+  margin-left: 8px;
			
 
				+}
			
 
				+
			
 
				+.markdown .waiting {
			
 
				+  color: #ccc;
			
 
				+}
			
 
				+
			
 
				+.markdown h1:hover .anchor,
			
 
				+.markdown h2:hover .anchor,
			
 
				+.markdown h3:hover .anchor,
			
 
				+.markdown h4:hover .anchor,
			
 
				+.markdown h5:hover .anchor,
			
 
				+.markdown h6:hover .anchor {
			
 
				+  opacity: 1;
			
 
				+  display: inline-block;
			
 
				+}
			
 
				+
			
 
				+.markdown>br,
			
 
				+.markdown>p>br {
			
 
				+  clear: both;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.hljs {
			
 
				+  display: block;
			
 
				+  background: white;
			
 
				+  padding: 0.5em;
			
 
				+  color: #333333;
			
 
				+  overflow-x: auto;
			
 
				+}
			
 
				+
			
 
				+.hljs-comment,
			
 
				+.hljs-meta {
			
 
				+  color: #969896;
			
 
				+}
			
 
				+
			
 
				+.hljs-string,
			
 
				+.hljs-variable,
			
 
				+.hljs-template-variable,
			
 
				+.hljs-strong,
			
 
				+.hljs-emphasis,
			
 
				+.hljs-quote {
			
 
				+  color: #df5000;
			
 
				+}
			
 
				+
			
 
				+.hljs-keyword,
			
 
				+.hljs-selector-tag,
			
 
				+.hljs-type {
			
 
				+  color: #a71d5d;
			
 
				+}
			
 
				+
			
 
				+.hljs-literal,
			
 
				+.hljs-symbol,
			
 
				+.hljs-bullet,
			
 
				+.hljs-attribute {
			
 
				+  color: #0086b3;
			
 
				+}
			
 
				+
			
 
				+.hljs-section,
			
 
				+.hljs-name {
			
 
				+  color: #63a35c;
			
 
				+}
			
 
				+
			
 
				+.hljs-tag {
			
 
				+  color: #333333;
			
 
				+}
			
 
				+
			
 
				+.hljs-title,
			
 
				+.hljs-attr,
			
 
				+.hljs-selector-id,
			
 
				+.hljs-selector-class,
			
 
				+.hljs-selector-attr,
			
 
				+.hljs-selector-pseudo {
			
 
				+  color: #795da3;
			
 
				+}
			
 
				+
			
 
				+.hljs-addition {
			
 
				+  color: #55a532;
			
 
				+  background-color: #eaffea;
			
 
				+}
			
 
				+
			
 
				+.hljs-deletion {
			
 
				+  color: #bd2c00;
			
 
				+  background-color: #ffecec;
			
 
				+}
			
 
				+
			
 
				+.hljs-link {
			
 
				+  text-decoration: underline;
			
 
				+}
			
 
				+
			
 
				+/* 代码高亮 */
			
 
				+/* PrismJS 1.15.0
			
 
				+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
			
 
				+/**
			
 
				+ * prism.js default theme for JavaScript, CSS and HTML
			
 
				+ * Based on dabblet (http://dabblet.com)
			
 
				+ * @author Lea Verou
			
 
				+ */
			
 
				+code[class*="language-"],
			
 
				+pre[class*="language-"] {
			
 
				+  color: black;
			
 
				+  background: none;
			
 
				+  text-shadow: 0 1px white;
			
 
				+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
			
 
				+  text-align: left;
			
 
				+  white-space: pre;
			
 
				+  word-spacing: normal;
			
 
				+  word-break: normal;
			
 
				+  word-wrap: normal;
			
 
				+  line-height: 1.5;
			
 
				+
			
 
				+  -moz-tab-size: 4;
			
 
				+  -o-tab-size: 4;
			
 
				+  tab-size: 4;
			
 
				+
			
 
				+  -webkit-hyphens: none;
			
 
				+  -moz-hyphens: none;
			
 
				+  -ms-hyphens: none;
			
 
				+  hyphens: none;
			
 
				+}
			
 
				+
			
 
				+pre[class*="language-"]::-moz-selection,
			
 
				+pre[class*="language-"] ::-moz-selection,
			
 
				+code[class*="language-"]::-moz-selection,
			
 
				+code[class*="language-"] ::-moz-selection {
			
 
				+  text-shadow: none;
			
 
				+  background: #b3d4fc;
			
 
				+}
			
 
				+
			
 
				+pre[class*="language-"]::selection,
			
 
				+pre[class*="language-"] ::selection,
			
 
				+code[class*="language-"]::selection,
			
 
				+code[class*="language-"] ::selection {
			
 
				+  text-shadow: none;
			
 
				+  background: #b3d4fc;
			
 
				+}
			
 
				+
			
 
				+@media print {
			
 
				+
			
 
				+  code[class*="language-"],
			
 
				+  pre[class*="language-"] {
			
 
				+    text-shadow: none;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+/* Code blocks */
			
 
				+pre[class*="language-"] {
			
 
				+  padding: 1em;
			
 
				+  margin: .5em 0;
			
 
				+  overflow: auto;
			
 
				+}
			
 
				+
			
 
				+:not(pre)>code[class*="language-"],
			
 
				+pre[class*="language-"] {
			
 
				+  background: #f5f2f0;
			
 
				+}
			
 
				+
			
 
				+/* Inline code */
			
 
				+:not(pre)>code[class*="language-"] {
			
 
				+  padding: .1em;
			
 
				+  border-radius: .3em;
			
 
				+  white-space: normal;
			
 
				+}
			
 
				+
			
 
				+.token.comment,
			
 
				+.token.prolog,
			
 
				+.token.doctype,
			
 
				+.token.cdata {
			
 
				+  color: slategray;
			
 
				+}
			
 
				+
			
 
				+.token.punctuation {
			
 
				+  color: #999;
			
 
				+}
			
 
				+
			
 
				+.namespace {
			
 
				+  opacity: .7;
			
 
				+}
			
 
				+
			
 
				+.token.property,
			
 
				+.token.tag,
			
 
				+.token.boolean,
			
 
				+.token.number,
			
 
				+.token.constant,
			
 
				+.token.symbol,
			
 
				+.token.deleted {
			
 
				+  color: #905;
			
 
				+}
			
 
				+
			
 
				+.token.selector,
			
 
				+.token.attr-name,
			
 
				+.token.string,
			
 
				+.token.char,
			
 
				+.token.builtin,
			
 
				+.token.inserted {
			
 
				+  color: #690;
			
 
				+}
			
 
				+
			
 
				+.token.operator,
			
 
				+.token.entity,
			
 
				+.token.url,
			
 
				+.language-css .token.string,
			
 
				+.style .token.string {
			
 
				+  color: #9a6e3a;
			
 
				+  background: hsla(0, 0%, 100%, .5);
			
 
				+}
			
 
				+
			
 
				+.token.atrule,
			
 
				+.token.attr-value,
			
 
				+.token.keyword {
			
 
				+  color: #07a;
			
 
				+}
			
 
				+
			
 
				+.token.function,
			
 
				+.token.class-name {
			
 
				+  color: #DD4A68;
			
 
				+}
			
 
				+
			
 
				+.token.regex,
			
 
				+.token.important,
			
 
				+.token.variable {
			
 
				+  color: #e90;
			
 
				+}
			
 
				+
			
 
				+.token.important,
			
 
				+.token.bold {
			
 
				+  font-weight: bold;
			
 
				+}
			
 
				+
			
 
				+.token.italic {
			
 
				+  font-style: italic;
			
 
				+}
			
 
				+
			
 
				+.token.entity {
			
 
				+  cursor: help;
			
 
				+}
			
--- a/src/assets/fonts/demo_index.html
+++ b/src/assets/fonts/demo_index.html
@@ -0,0 +1,262 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8"/>
			
 
				+  <title>IconFont Demo</title>
			
 
				+  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
			
 
				+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
			
 
				+  <link rel="stylesheet" href="demo.css">
			
 
				+  <link rel="stylesheet" href="iconfont.css">
			
 
				+  <script src="iconfont.js"></script>
			
 
				+  <!-- jQuery -->
			
 
				+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
			
 
				+  <!-- 代码高亮 -->
			
 
				+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div class="main">
			
 
				+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
			
 
				+    <div class="nav-tabs">
			
 
				+      <ul id="tabs" class="dib-box">
			
 
				+        <li class="dib active"><span>Unicode</span></li>
			
 
				+        <li class="dib"><span>Font class</span></li>
			
 
				+        <li class="dib"><span>Symbol</span></li>
			
 
				+      </ul>
			
 
				+      
			
 
				+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1782104" target="_blank" class="nav-more">查看项目</a>
			
 
				+      
			
 
				+    </div>
			
 
				+    <div class="tab-container">
			
 
				+      <div class="content unicode" style="display: block;">
			
 
				+          <ul class="icon_lists dib-box">
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+              <span class="icon iconfont">&#xe688;</span>
			
 
				+                <div class="name">三角形上</div>
			
 
				+                <div class="code-name">&amp;#xe688;</div>
			
 
				+              </li>
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+              <span class="icon iconfont">&#xe686;</span>
			
 
				+                <div class="name">三角形下</div>
			
 
				+                <div class="code-name">&amp;#xe686;</div>
			
 
				+              </li>
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+              <span class="icon iconfont">&#xe685;</span>
			
 
				+                <div class="name">返回</div>
			
 
				+                <div class="code-name">&amp;#xe685;</div>
			
 
				+              </li>
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+              <span class="icon iconfont">&#xe684;</span>
			
 
				+                <div class="name">日历</div>
			
 
				+                <div class="code-name">&amp;#xe684;</div>
			
 
				+              </li>
			
 
				+          
			
 
				+          </ul>
			
 
				+          <div class="article markdown">
			
 
				+          <h2 id="unicode-">Unicode 引用</h2>
			
 
				+          <hr>
			
 
				+
			
 
				+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
			
 
				+          <ul>
			
 
				+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
			
 
				+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
			
 
				+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
			
 
				+          </ul>
			
 
				+          <blockquote>
			
 
				+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
			
 
				+          </blockquote>
			
 
				+          <p>Unicode 使用步骤如下：</p>
			
 
				+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
			
 
				+<pre><code class="language-css"
			
 
				+>@font-face {
			
 
				+  font-family: 'iconfont';
			
 
				+  src: url('iconfont.eot');
			
 
				+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
			
 
				+      url('iconfont.woff2') format('woff2'),
			
 
				+      url('iconfont.woff') format('woff'),
			
 
				+      url('iconfont.ttf') format('truetype'),
			
 
				+      url('iconfont.svg#iconfont') format('svg');
			
 
				+}
			
 
				+</code></pre>
			
 
				+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
			
 
				+<pre><code class="language-css"
			
 
				+>.iconfont {
			
 
				+  font-family: "iconfont" !important;
			
 
				+  font-size: 16px;
			
 
				+  font-style: normal;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+}
			
 
				+</code></pre>
			
 
				+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
			
 
				+<pre>
			
 
				+<code class="language-html"
			
 
				+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
			
 
				+</code></pre>
			
 
				+          <blockquote>
			
 
				+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
			
 
				+          </blockquote>
			
 
				+          </div>
			
 
				+      </div>
			
 
				+      <div class="content font-class">
			
 
				+        <ul class="icon_lists dib-box">
			
 
				+          
			
 
				+          <li class="dib">
			
 
				+            <span class="icon iconfont iconsanjiaoxing1"></span>
			
 
				+            <div class="name">
			
 
				+              三角形上
			
 
				+            </div>
			
 
				+            <div class="code-name">.iconsanjiaoxing1
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          
			
 
				+          <li class="dib">
			
 
				+            <span class="icon iconfont iconsanjiaoxing"></span>
			
 
				+            <div class="name">
			
 
				+              三角形下
			
 
				+            </div>
			
 
				+            <div class="code-name">.iconsanjiaoxing
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          
			
 
				+          <li class="dib">
			
 
				+            <span class="icon iconfont iconfanhui"></span>
			
 
				+            <div class="name">
			
 
				+              返回
			
 
				+            </div>
			
 
				+            <div class="code-name">.iconfanhui
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          
			
 
				+          <li class="dib">
			
 
				+            <span class="icon iconfont iconrili"></span>
			
 
				+            <div class="name">
			
 
				+              日历
			
 
				+            </div>
			
 
				+            <div class="code-name">.iconrili
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          
			
 
				+        </ul>
			
 
				+        <div class="article markdown">
			
 
				+        <h2 id="font-class-">font-class 引用</h2>
			
 
				+        <hr>
			
 
				+
			
 
				+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
			
 
				+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
			
 
				+        <ul>
			
 
				+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
			
 
				+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
			
 
				+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
			
 
				+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
			
 
				+        </ul>
			
 
				+        <p>使用步骤如下：</p>
			
 
				+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
			
 
				+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
			
 
				+</code></pre>
			
 
				+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
			
 
				+<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
			
 
				+</code></pre>
			
 
				+        <blockquote>
			
 
				+          <p>"
			
 
				+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
			
 
				+        </blockquote>
			
 
				+      </div>
			
 
				+      </div>
			
 
				+      <div class="content symbol">
			
 
				+          <ul class="icon_lists dib-box">
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+                <svg class="icon svg-icon" aria-hidden="true">
			
 
				+                  <use xlink:href="#iconsanjiaoxing1"></use>
			
 
				+                </svg>
			
 
				+                <div class="name">三角形上</div>
			
 
				+                <div class="code-name">#iconsanjiaoxing1</div>
			
 
				+            </li>
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+                <svg class="icon svg-icon" aria-hidden="true">
			
 
				+                  <use xlink:href="#iconsanjiaoxing"></use>
			
 
				+                </svg>
			
 
				+                <div class="name">三角形下</div>
			
 
				+                <div class="code-name">#iconsanjiaoxing</div>
			
 
				+            </li>
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+                <svg class="icon svg-icon" aria-hidden="true">
			
 
				+                  <use xlink:href="#iconfanhui"></use>
			
 
				+                </svg>
			
 
				+                <div class="name">返回</div>
			
 
				+                <div class="code-name">#iconfanhui</div>
			
 
				+            </li>
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+                <svg class="icon svg-icon" aria-hidden="true">
			
 
				+                  <use xlink:href="#iconrili"></use>
			
 
				+                </svg>
			
 
				+                <div class="name">日历</div>
			
 
				+                <div class="code-name">#iconrili</div>
			
 
				+            </li>
			
 
				+          
			
 
				+          </ul>
			
 
				+          <div class="article markdown">
			
 
				+          <h2 id="symbol-">Symbol 引用</h2>
			
 
				+          <hr>
			
 
				+
			
 
				+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
			
 
				+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
			
 
				+          <ul>
			
 
				+            <li>支持多色图标了，不再受单色限制。</li>
			
 
				+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
			
 
				+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
			
 
				+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
			
 
				+          </ul>
			
 
				+          <p>使用步骤如下：</p>
			
 
				+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
			
 
				+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
			
 
				+</code></pre>
			
 
				+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
			
 
				+<pre><code class="language-html">&lt;style&gt;
			
 
				+.icon {
			
 
				+  width: 1em;
			
 
				+  height: 1em;
			
 
				+  vertical-align: -0.15em;
			
 
				+  fill: currentColor;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+&lt;/style&gt;
			
 
				+</code></pre>
			
 
				+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
			
 
				+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
			
 
				+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
			
 
				+&lt;/svg&gt;
			
 
				+</code></pre>
			
 
				+          </div>
			
 
				+      </div>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <script>
			
 
				+  $(document).ready(function () {
			
 
				+      $('.tab-container .content:first').show()
			
 
				+
			
 
				+      $('#tabs li').click(function (e) {
			
 
				+        var tabContent = $('.tab-container .content')
			
 
				+        var index = $(this).index()
			
 
				+
			
 
				+        if ($(this).hasClass('active')) {
			
 
				+          return
			
 
				+        } else {
			
 
				+          $('#tabs li').removeClass('active')
			
 
				+          $(this).addClass('active')
			
 
				+
			
 
				+          tabContent.hide().eq(index).fadeIn()
			
 
				+        }
			
 
				+      })
			
 
				+    })
			
 
				+  </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/src/assets/fonts/iconfont.css
+++ b/src/assets/fonts/iconfont.css
--- a/src/assets/fonts/iconfont.eot
+++ b/src/assets/fonts/iconfont.eot
--- a/src/assets/fonts/iconfont.js
+++ b/src/assets/fonts/iconfont.js
--- a/src/assets/fonts/iconfont.json
+++ b/src/assets/fonts/iconfont.json
@@ -0,0 +1,37 @@
 
				+{
			
 
				+  "id": "1782104",
			
 
				+  "name": "康师傅方便面",
			
 
				+  "font_family": "iconfont",
			
 
				+  "css_prefix_text": "icon",
			
 
				+  "description": "",
			
 
				+  "glyphs": [
			
 
				+    {
			
 
				+      "icon_id": "14386521",
			
 
				+      "name": "三角形上",
			
 
				+      "font_class": "sanjiaoxing1",
			
 
				+      "unicode": "e688",
			
 
				+      "unicode_decimal": 59016
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "14386483",
			
 
				+      "name": "三角形下",
			
 
				+      "font_class": "sanjiaoxing",
			
 
				+      "unicode": "e686",
			
 
				+      "unicode_decimal": 59014
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "14330176",
			
 
				+      "name": "返回",
			
 
				+      "font_class": "fanhui",
			
 
				+      "unicode": "e685",
			
 
				+      "unicode_decimal": 59013
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "14330102",
			
 
				+      "name": "日历",
			
 
				+      "font_class": "rili",
			
 
				+      "unicode": "e684",
			
 
				+      "unicode_decimal": 59012
			
 
				+    }
			
 
				+  ]
			
 
				+}
			
--- a/src/assets/fonts/iconfont.svg
+++ b/src/assets/fonts/iconfont.svg
--- a/src/assets/fonts/iconfont.ttf
+++ b/src/assets/fonts/iconfont.ttf
--- a/src/assets/fonts/iconfont.woff
+++ b/src/assets/fonts/iconfont.woff
--- a/src/assets/fonts/iconfont.woff2
+++ b/src/assets/fonts/iconfont.woff2
--- a/src/assets/images/aside/cjxz.png
+++ b/src/assets/images/aside/cjxz.png
--- a/src/assets/images/aside/hdzy.png
+++ b/src/assets/images/aside/hdzy.png
--- a/src/assets/images/aside/uic.png
+++ b/src/assets/images/aside/uic.png
--- a/src/assets/images/bg/bg1.jpg
+++ b/src/assets/images/bg/bg1.jpg
--- a/src/assets/images/bg/bg2.jpg
+++ b/src/assets/images/bg/bg2.jpg
--- a/src/assets/images/bg/bg3.jpg
+++ b/src/assets/images/bg/bg3.jpg
--- a/src/assets/images/bg/video_bg.jpg
+++ b/src/assets/images/bg/video_bg.jpg
--- a/src/assets/images/icon/logo.png
+++ b/src/assets/images/icon/logo.png
--- a/src/assets/images/icon/xiaoxun.png
+++ b/src/assets/images/icon/xiaoxun.png
--- a/src/assets/images/logo.png
+++ b/src/assets/images/logo.png
--- a/src/assets/images/share.png
+++ b/src/assets/images/share.png
--- a/src/assets/images/tiaoguo.png
+++ b/src/assets/images/tiaoguo.png
--- a/src/assets/images/tiyan.png
+++ b/src/assets/images/tiyan.png
--- a/src/assets/images/vr/1.png
+++ b/src/assets/images/vr/1.png
--- a/src/assets/images/vr/10.png
+++ b/src/assets/images/vr/10.png
--- a/src/assets/images/vr/11.png
+++ b/src/assets/images/vr/11.png
--- a/src/assets/images/vr/12.png
+++ b/src/assets/images/vr/12.png
--- a/src/assets/images/vr/13.png
+++ b/src/assets/images/vr/13.png
--- a/src/assets/images/vr/14.png
+++ b/src/assets/images/vr/14.png
--- a/src/assets/images/vr/15.png
+++ b/src/assets/images/vr/15.png
--- a/src/assets/images/vr/16.png
+++ b/src/assets/images/vr/16.png
--- a/src/assets/images/vr/17.png
+++ b/src/assets/images/vr/17.png
--- a/src/assets/images/vr/18.png
+++ b/src/assets/images/vr/18.png
--- a/src/assets/images/vr/19.png
+++ b/src/assets/images/vr/19.png
--- a/src/assets/images/vr/2.png
+++ b/src/assets/images/vr/2.png
--- a/src/assets/images/vr/20.png
+++ b/src/assets/images/vr/20.png
--- a/src/assets/images/vr/21.png
+++ b/src/assets/images/vr/21.png
--- a/src/assets/images/vr/22.png
+++ b/src/assets/images/vr/22.png
--- a/src/assets/images/vr/23.png
+++ b/src/assets/images/vr/23.png
--- a/src/assets/images/vr/24.png
+++ b/src/assets/images/vr/24.png
--- a/src/assets/images/vr/25.png
+++ b/src/assets/images/vr/25.png
--- a/src/assets/images/vr/3.png
+++ b/src/assets/images/vr/3.png
--- a/src/assets/images/vr/4.png
+++ b/src/assets/images/vr/4.png
--- a/src/assets/images/vr/5.png
+++ b/src/assets/images/vr/5.png
--- a/src/assets/images/vr/6.png
+++ b/src/assets/images/vr/6.png
--- a/src/assets/images/vr/7.png
+++ b/src/assets/images/vr/7.png
--- a/src/assets/images/vr/8.png
+++ b/src/assets/images/vr/8.png
--- a/src/assets/images/vr/9.png
+++ b/src/assets/images/vr/9.png
--- a/src/components/data.js
+++ b/src/components/data.js
@@ -0,0 +1,184 @@
 
				+const baseUrl = "https://4d-tjw.oss-cn-shenzhen.aliyuncs.com/uic/";
			
 
				+
			
 
				+let data = {
			
 
				+  cjxz: [
			
 
				+    {
			
 
				+      image: baseUrl + "vr/23.png",
			
 
				+      en: "UIC Campus",
			
 
				+      url: "https://houseoss.4dkankan.com/uic/UICcode/hp1/tour.html",
			
 
				+      text: "北师港浸大校园",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/24.png",
			
 
				+      en: "Proposed land for second phase campus construction",
			
 
				+      url: "https://houseoss.4dkankan.com/uic/UICcode/hp3/tour.html",
			
 
				+      text: "校园二期规划用地",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/25.png",
			
 
				+      en: "Sports Park",
			
 
				+      url: "https://houseoss.4dkankan.com/uic/UICcode/hp2/tour.html",
			
 
				+      text: "体育公园",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/1.png",
			
 
				+      en: "Learning Resource Centre",
			
 
				+      url: "https://houseoss.4dkankan.com/uic/UICcode/zyzx/tour.html",
			
 
				+      text: "学习资源中心",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/2.png",
			
 
				+      en: "Ceramics Studio",
			
 
				+      url: "https://www.4dmodel.com/Frameinterface/spc.html?m=R4dzEiEE9",
			
 
				+      scene:true,
			
 
				+      text: "陶艺室"
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/3.png",
			
 
				+      en: "Film and TV Studio",
			
 
				+      url: "https://www.4dmodel.com/Frameinterface/spc.html?m=cgyVWGclA",
			
 
				+      scene:true,
			
 
				+      text: "影视演播厅",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/4.png",
			
 
				+      en: "Yayue Hall",
			
 
				+      url: "https://www.4dmodel.com/Frameinterface/spc.html?m=nOdlRTUfy",
			
 
				+      scene:true,
			
 
				+      text: "雅乐堂",
			
 
				+      noMusic:true
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/5.png",
			
 
				+      en: "House of Shedao",
			
 
				+      url: "https://www.4dmodel.com/Frameinterface/spc.html?m=uAgQegKmq",
			
 
				+      scene:true,
			
 
				+      text: "射道馆",
			
 
				+      noMusic:true
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/6.png",
			
 
				+      en: "House of Guqin",
			
 
				+      url: "https://www.4dmodel.com/Frameinterface/spc.html?m=9yIk5LFO4",
			
 
				+      scene:true,
			
 
				+      text: "古琴馆",
			
 
				+      noMusic:true
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/7.png",
			
 
				+      en: "Institute for Communication Studies of Chinese Culture",
			
 
				+      url: "https://www.4dmodel.com/Frameinterface/spc.html?m=tgX4MGneZ",
			
 
				+      scene:true,
			
 
				+      text: "中华文化传播研究院",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/8.png",
			
 
				+      en: "Accounting and Finance Research Laboratory",
			
 
				+      url: "https://www.4dmodel.com/Frameinterface/spc.html?m=0ruqoS84u",
			
 
				+      scene:true,
			
 
				+      text: "会计金融实验室",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/9.png",
			
 
				+      en: "Lecture Theatre",
			
 
				+      url: "https://houseoss.4dkankan.com/uic/UICcode/hyt/tour.html",
			
 
				+      text: "演讲厅",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/10.png",
			
 
				+      en: "Classroom",
			
 
				+      url: "https://houseoss.4dkankan.com/uic/UICcode/jiaoshi/tour.html",
			
 
				+      text: "教室",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/11.png",
			
 
				+      en: "Gym",
			
 
				+      url: "https://www.4dmodel.com/Frameinterface/smobile.html?m=bCLhG97U5",
			
 
				+      scene:true,
			
 
				+      text: "健身房",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/12.png",
			
 
				+      en: "Swimming Pool",
			
 
				+      url: "https://houseoss.4dkankan.com/uic/UICcode/yyc/tour.html",
			
 
				+      text: "游泳馆",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/13.png",
			
 
				+      en: "Multi-Purpose Gym",
			
 
				+      url: "https://houseoss.4dkankan.com/uic/UICcode/gym/tour.html",
			
 
				+      text: "多功能馆",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/14.png",
			
 
				+      en: "Dancing Room",
			
 
				+      url: "https://houseoss.4dkankan.com/uic/UICcode/wds/tour.html",
			
 
				+      text: "舞蹈室",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/15.png",
			
 
				+      en: "University Hall",
			
 
				+      url: "https://www.4dmodel.com/Frameinterface/spc.html?m=XUWwESDwc",
			
 
				+      scene:true,
			
 
				+      text: "大学会堂",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/16.png",
			
 
				+      en: "Laboratories",
			
 
				+      url: "https://www.4dmodel.com/Frameinterface/smobile.html?m=Z4Hz9nh10",
			
 
				+      scene:true,
			
 
				+      text: "实验室",
			
 
				+    },
			
 
				+    // {
			
 
				+    //   image: baseUrl + "vr/17.png",
			
 
				+    //   en: "Sports Park (ground)",
			
 
				+    //   url: "https://houseoss.4dkankan.com/uic/UICcode/tygy1/tour.html",
			
 
				+    //   text: "体育公园（地面）",
			
 
				+    // },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/18.png",
			
 
				+      en: "Student Dormitory (Double Room)",
			
 
				+      url: "https://www.4dmodel.com/Frameinterface/spc.html?m=aUYeNAvVk",
			
 
				+      scene:true,
			
 
				+      text: "宿舍（二人间）",
			
 
				+      noMusic:true
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/19.png",
			
 
				+      en: "Student Dormitory (Triple Room)",
			
 
				+      url: "https://houseoss.4dkankan.com/uic/UICcode/sanrenjian/tour.html",
			
 
				+      text: "宿舍（三人间）",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/20.png",
			
 
				+      en: "Student Dormitory (Quadruple Room)",
			
 
				+      url: "https://houseoss.4dkankan.com/uic/UICcode/sirenjian/tour.html",
			
 
				+      text: "宿舍（四人间）",
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/21.png",
			
 
				+      en: "Common Room of Student Dormitory",
			
 
				+      url: "https://www.4dmodel.com/Frameinterface/smobile.html?m=4WMcIdrFQ",
			
 
				+      scene:true,
			
 
				+      text: "宿舍公共空间",
			
 
				+      noMusic:true
			
 
				+    },
			
 
				+    {
			
 
				+      image: baseUrl + "vr/22.png",
			
 
				+      en: "Canteens",
			
 
				+      url: "https://www.4dmodel.com/Frameinterface/spc.html?m=AqFvVacEw",
			
 
				+      scene:true,
			
 
				+      text: "餐厅",
			
 
				+    },
			
 
				+  ],
			
 
				+};
			
 
				+
			
 
				+let all = [];
			
 
				+
			
 
				+Object.keys(data).forEach((item) => {
			
 
				+  data[item][0]["isfirst"] = true;
			
 
				+  data[item][data[item].length - 1]["isLast"] = true;
			
 
				+  all = data[item].concat(all);
			
 
				+});
			
 
				+
			
 
				+export { data };
			
--- a/src/components/detailSwiper.vue
+++ b/src/components/detailSwiper.vue
@@ -0,0 +1,192 @@
 
				+<template>
			
 
				+  <div class="swiper-container" @click.stop>
			
 
				+    <swiper
			
 
				+      ref="detailSwiper"
			
 
				+      class="swiper-wrapper"
			
 
				+      :options="swiperOption"
			
 
				+    >
			
 
				+      <swiper-slide
			
 
				+        class="swiper-slide"
			
 
				+        v-for="(item, index) in activeType.arrLength"
			
 
				+        :key="index"
			
 
				+      >
			
 
				+        <div >
			
 
				+          <div class="sw-card">
			
 
				+            <video v-if="activeType.video" :src="`${$cdn}video/${activeType.video}.mp4`" loop autoplay playsinline webkit-playsinline></video>
			
 
				+            <img v-else class="main-img" :src="`${$cdn}detail/${activeType.url}/${index+1}.jpg`" />
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <template v-if="activeType.arrLength>=2">
			
 
				+          <div class="swiper-button-prev"></div>
			
 
				+          <div class="swiper-button-next"></div>
			
 
				+        </template>
			
 
				+      </swiper-slide>
			
 
				+ 
			
 
				+    </swiper>
			
 
				+    
			
 
				+     <div class="txt">
			
 
				+      <h2>{{activeType.text}}</h2>
			
 
				+      <p v-html="activeType.detail"></p>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
			
 
				+import "swiper/css/swiper.css";
			
 
				+
			
 
				+export default {
			
 
				+  computed: {
			
 
				+    swiper() {
			
 
				+      return this.$refs.detailSwiper.$swiper;
			
 
				+    },
			
 
				+    swiperOption() {
			
 
				+      return {
			
 
				+        navigation: {
			
 
				+          nextEl: '.swiper-button-next',
			
 
				+          prevEl: '.swiper-button-prev'
			
 
				+        },
			
 
				+      };
			
 
				+    }
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      showNext: 0,
			
 
				+      showPre: 0,
			
 
				+    };
			
 
				+  },
			
 
				+  methods: {
			
 
				+    
			
 
				+  },
			
 
				+  components: {
			
 
				+    Swiper,
			
 
				+    SwiperSlide,
			
 
				+  },
			
 
				+  directives: {
			
 
				+    swiper: directive,
			
 
				+  },
			
 
				+  props:['activeType'],
			
 
				+  mounted() {
			
 
				+    this.$emit("swiper1", this.swiper);
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+<style lang="less" scoped>
			
 
				+.swiper-container {
			
 
				+  width: 100%;
			
 
				+}
			
 
				+
			
 
				+.swiper-wrapper {
			
 
				+  margin-top: 10px;
			
 
				+  padding: 20px 0 0;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+.swiper-slide img {
			
 
				+  overflow: hidden;
			
 
				+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
			
 
				+}
			
 
				+
			
 
				+.swiper-slide video {
			
 
				+  width: 100%;
			
 
				+}
			
 
				+
			
 
				+.swiper-slide .main-img {
			
 
				+  width: 100%;
			
 
				+  margin: 0 auto;
			
 
				+  display: block;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+#pagination {
			
 
				+  position: absolute;
			
 
				+  bottom: 100px;
			
 
				+  width: 100%;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+#pagination .swiper-pagination-bullet {
			
 
				+  width: 9.5%;
			
 
				+  float: left;
			
 
				+  margin: 0 0 0 6.15%;
			
 
				+  background: 0;
			
 
				+  opacity: 1;
			
 
				+}
			
 
				+
			
 
				+.swiper-pagination-bullet i {
			
 
				+  background: #41203f;
			
 
				+  width: 24px;
			
 
				+  height: 24px;
			
 
				+  line-height: 24px;
			
 
				+  font-size: 12px;
			
 
				+  display: block;
			
 
				+  font-style: normal;
			
 
				+  text-align: center;
			
 
				+  margin: 0 auto;
			
 
				+  color: #f5b55c;
			
 
				+}
			
 
				+
			
 
				+.swiper-pagination-bullet-active i {
			
 
				+  transform: scale(1.5);
			
 
				+  background-size: auto 100%;
			
 
				+  color: #815d4b;
			
 
				+}
			
 
				+
			
 
				+.txt{
			
 
				+  color: #fff;
			
 
				+  padding: 6%;
			
 
				+  letter-spacing: 1px;
			
 
				+  font-size: 16px;
			
 
				+  width: 100%;
			
 
				+  p{
			
 
				+    text-align: justify;
			
 
				+    font-size: 16px;
			
 
				+    line-height: 1.5;
			
 
				+    margin-top: 10px;
			
 
				+    height: calc(70vh - 200px);
			
 
				+    overflow-y: auto;
			
 
				+    overflow-x: hidden;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.swiper-button-prev{
			
 
				+  background:url("http://4d-tjw.oss-cn-shenzhen.aliyuncs.com/qi_ao/detail/prev.png") no-repeat;
			
 
				+  background-size: cover;
			
 
				+  background-color: rgba(0, 0, 0, 0);
			
 
				+  &::after{
			
 
				+    content: none;
			
 
				+  }
			
 
				+}
			
 
				+.swiper-button-next{
			
 
				+  background:url("http://4d-tjw.oss-cn-shenzhen.aliyuncs.com/qi_ao/detail/next.png") no-repeat;
			
 
				+  background-size: cover;
			
 
				+  background-color: rgba(0, 0, 0, 0);
			
 
				+  &::after{
			
 
				+    content: none;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+@media screen and (min-height: 481px) {
			
 
				+  .swiper-wrapper {
			
 
				+    margin-top: 30px;
			
 
				+  }
			
 
				+  #pagination {
			
 
				+    bottom: 110px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (min-height: 569px) {
			
 
				+  .swiper-wrapper {
			
 
				+    margin-top: 40px;
			
 
				+  }
			
 
				+  #pagination {
			
 
				+    bottom: 120px;
			
 
				+  }
			
 
				+  .swiper-pagination-bullet i {
			
 
				+    width: 30px;
			
 
				+    height: 30px;
			
 
				+    line-height: 30px;
			
 
				+    font-size: 15px;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/listSwiper.vue
+++ b/src/components/listSwiper.vue
@@ -0,0 +1,171 @@
 
				+<template>
			
 
				+  <div class="swiper-container">
			
 
				+    <swiper
			
 
				+      ref="listSwiper"
			
 
				+      class="swiper-wrapper swiper-wrapper-n"
			
 
				+      :options="swiperOption"
			
 
				+    >
			
 
				+      <swiper-slide
			
 
				+        class="swiper-slide"
			
 
				+        v-for="(item, index) in items"
			
 
				+        :key="index"
			
 
				+      >
			
 
				+          <div class="sw-card" @click='goto(item)'>
			
 
				+            <img class="main-img" :src="item.image" />
			
 
				+            <p>{{ item.text }}</p>
			
 
				+            <p>{{ item.en }}</p>
			
 
				+          </div>
			
 
				+      </swiper-slide>
			
 
				+    </swiper>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
			
 
				+import "swiper/css/swiper.css";
			
 
				+import { data } from "./data";
			
 
				+import browser from '@/utils/browser'
			
 
				+
			
 
				+export default {
			
 
				+  computed: {
			
 
				+    swiper() {
			
 
				+      return this.$refs.listSwiper.$swiper;
			
 
				+    },
			
 
				+    swiperOption() {
			
 
				+      // let that = this
			
 
				+      return {
			
 
				+        slidesPerView: "auto",
			
 
				+        autoplay: false,
			
 
				+        direction : this.isMobile ? 'vertical' : 'horizontal'
			
 
				+      };
			
 
				+    },
			
 
				+    items() {
			
 
				+      return data['cjxz'];
			
 
				+    }
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      showNext: 0,
			
 
				+      showPre: 0,
			
 
				+      isMobile: browser.mobile
			
 
				+    };
			
 
				+  },
			
 
				+  methods: {
			
 
				+    
			
 
				+    goto(item) {
			
 
				+      
			
 
				+      let {url,noMusic,scene} = item
			
 
				+      if (url === this.$route.query.ifr) {
			
 
				+        return
			
 
				+      }
			
 
				+      if (scene) {
			
 
				+       return window.location.href = url
			
 
				+      }
			
 
				+
			
 
				+      this.$router.push({
			
 
				+          name:'list',
			
 
				+          query:{
			
 
				+            ifr:url || '',
			
 
				+            noMusic,
			
 
				+            scene
			
 
				+          }
			
 
				+        })
			
 
				+      this.$emit('close',true)
			
 
				+     
			
 
				+    },
			
 
				+  },
			
 
				+  components: {
			
 
				+    Swiper,
			
 
				+    SwiperSlide,
			
 
				+  },
			
 
				+  directives: {
			
 
				+    swiper: directive,
			
 
				+  },
			
 
				+  props:['activeType'],
			
 
				+  mounted() {
			
 
				+    this.$emit("swiper1", this.swiper);
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+<style lang="less" scoped>
			
 
				+.swiper-container {
			
 
				+  height: 208px;
			
 
				+  width: 100%;
			
 
				+  position: fixed;
			
 
				+  left: 0;
			
 
				+  bottom: 0;
			
 
				+  .swiper-wrapper {
			
 
				+    height: 208px;
			
 
				+    width: 100%;
			
 
				+    float: right;
			
 
				+    background: linear-gradient(to right,#0075BC,#06816F);
			
 
				+    .swiper-slide {
			
 
				+      transform-style: preserve-3d;
			
 
				+      height: auto!important;
			
 
				+      width: 200px;
			
 
				+      padding: 10px;
			
 
				+      cursor: pointer;
			
 
				+      .sw-card{
			
 
				+        text-align: center;
			
 
				+        margin-bottom: 6px;
			
 
				+        img {
			
 
				+          overflow: hidden;
			
 
				+          width: 100%;
			
 
				+          margin-top: 10px;
			
 
				+        }
			
 
				+        p{
			
 
				+          color: #fff;
			
 
				+          text-align: left;
			
 
				+          margin: 0 10px;
			
 
				+          font-size: 12px;
			
 
				+          &:first-of-type{
			
 
				+            font-size: 14px;
			
 
				+            font-weight: bold;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 500px) {
			
 
				+  .swiper-container {
			
 
				+    height: 100%;
			
 
				+    width: 50%;
			
 
				+    position: fixed;
			
 
				+    right: 0;
			
 
				+    top: 0;
			
 
				+    left: unset;
			
 
				+    bottom: unset;
			
 
				+    .swiper-wrapper {
			
 
				+      width: 50%;
			
 
				+      height: 100%;
			
 
				+      float: right;
			
 
				+      .swiper-slide {
			
 
				+        transform-style: preserve-3d;
			
 
				+        height: auto!important;
			
 
				+        padding: 0;
			
 
				+        width: auto;
			
 
				+        .sw-card{
			
 
				+          text-align: center;
			
 
				+          margin-bottom: 6px;
			
 
				+          img {
			
 
				+            overflow: hidden;
			
 
				+            width: calc(100% - 20px);
			
 
				+            margin-top: 10px;
			
 
				+          }
			
 
				+          p{
			
 
				+            color: #fff;
			
 
				+            text-align: left;
			
 
				+            margin: 0 10px;
			
 
				+            font-size: 12px;
			
 
				+            &:first-of-type{
			
 
				+              font-size: 14px;
			
 
				+              font-weight: bold;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,14 @@
 
				+import Vue from 'vue'
			
 
				+import App from './App.vue'
			
 
				+import router from './router'
			
 
				+
			
 
				+Vue.prototype.$bus = new Vue()
			
 
				+Vue.prototype.$cdn = 'https://4d-tjw.oss-cn-shenzhen.aliyuncs.com/uic/'
			
 
				+
			
 
				+
			
 
				+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,29 @@
 
				+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: '/list',
			
 
				+    name: 'list',
			
 
				+    component: () => import(/* webpackChunkName: "about" */ '../views/list.vue')
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/xps',
			
 
				+    name: 'xps',
			
 
				+    component: () => import(/* webpackChunkName: "about" */ '../views/xps.vue')
			
 
				+  }
			
 
				+]
			
 
				+
			
 
				+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,185 @@
 
				+<template>
			
 
				+  <div class="container">
			
 
				+    <img class="bg_img" :class="{bg_opc:current === 0}" :src="`${$cdn}bg/${isMobile?'':'pc-'}bg1.jpg`" alt="">
			
 
				+    <img class="bg_img" :class="{bg_opc:current === 1}" :src="`${$cdn}bg/${isMobile?'':'pc-'}bg2.jpg`" alt="">
			
 
				+    <img class="bg_img" :class="{bg_opc:current === 2}" :src="`${$cdn}bg/${isMobile?'':'pc-'}bg3.jpg`" alt="">
			
 
				+
			
 
				+    <div class="home_btn" @click="videoVisble = true">
			
 
				+      <p>全景校园 Virtual Tour</p>
			
 
				+      <button :style="{backgroundImage:`url(${$cdn}icon/tiyan.png)`}">
			
 
				+      </button>
			
 
				+    </div>
			
 
				+    <img class="logo" :src="`${$cdn}icon/xiaoxun.png`" alt="">
			
 
				+    <img class="logo logo2" :src="`${$cdn}icon/logo.png`" alt="">
			
 
				+
			
 
				+    <div class="initVideo" v-if="videoVisble">
			
 
				+      <video controls autoplay loop :src="`${$cdn}video/introduce.mp4`"></video>
			
 
				+      <div class="home_btn" @click="tiaoguo">
			
 
				+        <button :style="{backgroundImage:`url(${$cdn}icon/tiaoguo.png)`}">
			
 
				+        </button>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import browser from '@/utils/browser'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'Home',
			
 
				+  data(){
			
 
				+    return{
			
 
				+      videoVisble:false,
			
 
				+      current:0,
			
 
				+      isMobile: browser.mobile
			
 
				+    }
			
 
				+  },
			
 
				+  components: {
			
 
				+    
			
 
				+  },
			
 
				+  methods:{
			
 
				+    tiaoguo(){
			
 
				+      this.$emit('audio',true)
			
 
				+      this.$router.push({path:'list'})
			
 
				+    }
			
 
				+  },
			
 
				+  mounted(){
			
 
				+    setInterval(() => {
			
 
				+      if (this.current >= 2) {
			
 
				+        this.current = 0
			
 
				+      }
			
 
				+      else{
			
 
				+        this.current += 1
			
 
				+      }
			
 
				+    }, 3000);
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.container{
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  margin: 0 auto;
			
 
				+  position: relative;
			
 
				+  .bg_img{
			
 
				+    position: absolute;
			
 
				+    top: 50%;
			
 
				+    left: 50%;
			
 
				+    transform: translate(-50%,-50%);
			
 
				+    width: 100%;
			
 
				+    transition: all ease .5s;
			
 
				+    opacity: 0;
			
 
				+    z-index: -1;
			
 
				+  }
			
 
				+
			
 
				+  .bg_opc{
			
 
				+    opacity: 1;
			
 
				+  }
			
 
				+
			
 
				+  
			
 
				+  .logo{
			
 
				+    position: absolute;
			
 
				+    left: 60px;
			
 
				+    top: 30px;
			
 
				+    z-index: 99999;
			
 
				+    width: 300px;
			
 
				+  }
			
 
				+  .logo2{
			
 
				+    left: unset;
			
 
				+    top: 30px;
			
 
				+    right: 30px;
			
 
				+    width: 200px;
			
 
				+  }
			
 
				+  .home_btn{
			
 
				+    position: absolute;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    bottom: 6%;
			
 
				+    z-index: 9999;
			
 
				+    font-size: 0;
			
 
				+    color: #fff;
			
 
				+    p{
			
 
				+      color: #fff;
			
 
				+      font-size: 18px;
			
 
				+      letter-spacing: 1px;
			
 
				+      margin-bottom: 4px;
			
 
				+      text-shadow: 0 5px 10px rgba(0, 0, 0, 1);
			
 
				+      text-align: center;
			
 
				+    }
			
 
				+    button{
			
 
				+      font-size: 18px;
			
 
				+      width: calc(415px * 0.6);
			
 
				+      height: calc(155px * 0.6);
			
 
				+      border-radius: 4px;
			
 
				+      cursor: pointer;
			
 
				+      color: #fff;
			
 
				+      letter-spacing: 1px;
			
 
				+      padding: 8px 40px;
			
 
				+      font-weight: bold;
			
 
				+      border: none;
			
 
				+      background-repeat: no-repeat;
			
 
				+      background-size: cover;
			
 
				+      background-color: rgba(0, 0, 0, 0);
			
 
				+      span{
			
 
				+        margin-top: 4px;
			
 
				+        font-size: 14px;
			
 
				+        font-weight: normal;
			
 
				+        display: inline-block;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .initVideo{
			
 
				+    position: fixed;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    background: url('https://4d-tjw.oss-cn-shenzhen.aliyuncs.com/uic/bg/pc-video_bg.jpg') center;
			
 
				+    background-size: cover;
			
 
				+    z-index: 99999;
			
 
				+    video{
			
 
				+      width: 50%;
			
 
				+      position: absolute;
			
 
				+      top: 50%;
			
 
				+      left: 50%;
			
 
				+      transform: translate(-50%,-50%);
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 500px) {
			
 
				+  .container{
			
 
				+    max-width: 500px;
			
 
				+    .logo{
			
 
				+      width: 40%;
			
 
				+      left: 20px;
			
 
				+      top: 30px;
			
 
				+    }
			
 
				+    .logo2{
			
 
				+      right: 10px;
			
 
				+      left: unset;
			
 
				+      width: 38%;
			
 
				+    }
			
 
				+    .home_btn{
			
 
				+      p{
			
 
				+        font-size: 12px;
			
 
				+      }
			
 
				+      button{
			
 
				+        width: calc(415px * 0.4);
			
 
				+        height: calc(155px * 0.4);
			
 
				+      }
			
 
				+    }
			
 
				+    .initVideo{
			
 
				+      background: url('https://4d-tjw.oss-cn-shenzhen.aliyuncs.com/uic/bg/video_bg.jpg') center;
			
 
				+      video{
			
 
				+        width: 100%;
			
 
				+        position: absolute;
			
 
				+        top: 50%;
			
 
				+        left: 0;
			
 
				+        transform: translateY(-50%);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/list.vue
+++ b/src/views/list.vue
@@ -0,0 +1,175 @@
 
				+<template>
			
 
				+  <div class="container">
			
 
				+    <iframe :src="ifr" frameborder="0"></iframe>
			
 
				+    <ul class="aside">
			
 
				+      <li @click="handleItem(item)" v-for="(item,i) in aside" :key="i" class>
			
 
				+        <img :src="`${$cdn}aside/${item.name}.png`" alt />
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+
			
 
				+    <div class="swiper-mask" @click="listVisable = false" v-show="listVisable"></div>
			
 
				+        <listSwiper
			
 
				+              v-if="listVisable"
			
 
				+              @close="()=>{listVisable = false}"
			
 
				+              @msgsActive="handleMsgs"
			
 
				+              :activeType="activeType"
			
 
				+            />
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import listSwiper from "@/components/listSwiper";
			
 
				+
			
 
				+const aside = [
			
 
				+  {
			
 
				+    id: "",
			
 
				+    name: "hdzy"
			
 
				+  },
			
 
				+  {
			
 
				+    id: "",
			
 
				+    name: "cjxz"
			
 
				+  },
			
 
				+  {
			
 
				+    id: "",
			
 
				+    name: "uic"
			
 
				+  }
			
 
				+];
			
 
				+export default {
			
 
				+  name: "Home",
			
 
				+  data() {
			
 
				+    return {
			
 
				+      active: false,
			
 
				+      aside,
			
 
				+      listVisable: false,
			
 
				+      detailVisable: false,
			
 
				+      activeType: "",
			
 
				+      activeDetail: "",
			
 
				+      musicSta: !this.$route.query.noMusic,
			
 
				+      mus: ""
			
 
				+    };
			
 
				+  },
			
 
				+  watch: {
			
 
				+    musicSta(val) {
			
 
				+      this.$emit('audio',val)
			
 
				+    },
			
 
				+    '$route.query.noMusic':function (val) {
			
 
				+      this.musicSta = !val
			
 
				+    }
			
 
				+  },
			
 
				+  computed: {
			
 
				+    ifr() {
			
 
				+      let { ifr } = this.$route.query;
			
 
				+      let iframe = ifr ? ifr : "https://houseoss.4dkankan.com/uic/UICcode/hp1/tour.html";
			
 
				+      return iframe;
			
 
				+    },
			
 
				+    titleImg() {
			
 
				+      let { ifr } = this.$route.query;
			
 
				+
			
 
				+      return !ifr
			
 
				+        ? `${this.$cdn}title/FKQAD.png`
			
 
				+        : ``;
			
 
				+    }
			
 
				+  },
			
 
				+  components: {
			
 
				+    listSwiper
			
 
				+  },
			
 
				+  methods: {
			
 
				+    handleMsgs(data) {
			
 
				+      this.detailVisable = true;
			
 
				+      this.activeDetail = data.item;
			
 
				+    },
			
 
				+    handleItem(item) {
			
 
				+      if (item.name === "hdzy") {
			
 
				+        this.$emit('audio',false)
			
 
				+        return this.$router.push({ path: "/" });
			
 
				+      }
			
 
				+
			
 
				+      if (item.name === "uic") {
			
 
				+        return window.open('https://uic.edu.cn/en/','_blank')
			
 
				+      }
			
 
				+     
			
 
				+      this.listVisable = true;
			
 
				+      this.activeType = item.name;
			
 
				+    }
			
 
				+  },
			
 
				+  mounted() {
			
 
				+   
			
 
				+  }
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.container {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  margin: 0 auto;
			
 
				+  position: relative;
			
 
				+  overflow: hidden;
			
 
				+  iframe {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+  }
			
 
				+ 
			
 
				+  .aside {
			
 
				+    position: fixed;
			
 
				+    right: 10px;
			
 
				+    top: 50%;
			
 
				+    transform: translateY(-50%);
			
 
				+    li {
			
 
				+      cursor: pointer;
			
 
				+      img {
			
 
				+        width: 100px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .swiper-mask {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    position: fixed;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    .btn {
			
 
				+      position: absolute;
			
 
				+      right: 10px;
			
 
				+      top: 10px;
			
 
				+      background: #fb3802;
			
 
				+      border-radius: 4px;
			
 
				+      line-height: 30px;
			
 
				+      height: 30px;
			
 
				+      color: #fff;
			
 
				+      display: inline-block;
			
 
				+      padding: 0 10px;
			
 
				+      width: 80px;
			
 
				+      text-align: center;
			
 
				+      z-index: 999999;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .detail {
			
 
				+    z-index: 6666;
			
 
				+    background: rgba(0, 0, 0, 1);
			
 
				+  }
			
 
				+
			
 
				+  .musicicon {
			
 
				+    position: fixed;
			
 
				+    left: 10px;
			
 
				+    bottom: 10px;
			
 
				+    img {
			
 
				+      width: 40px;
			
 
				+      height: auto;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+@media screen and (max-width: 500px) {
			
 
				+  .container {
			
 
				+    max-width: 500px;
			
 
				+    .aside {
			
 
				+      li {
			
 
				+        img {
			
 
				+          width: 70px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/xps.vue
+++ b/src/views/xps.vue
@@ -0,0 +1,141 @@
 
				+<template>
			
 
				+  <div class="swiper-container">
			
 
				+    <swiper
			
 
				+      ref="listSwiper"
			
 
				+      class="swiper-wrapper swiper-wrapper-n"
			
 
				+      :options="swiperOption"
			
 
				+    >
			
 
				+      <swiper-slide
			
 
				+        class="swiper-slide"
			
 
				+        v-for="(item, index) in items"
			
 
				+        :key="index"
			
 
				+      >
			
 
				+          <div class="sw-card" @click='goto(item)'>
			
 
				+            <img class="main-img" :src="item.image" />
			
 
				+            <p>{{ item.text }}</p>
			
 
				+            <p>{{ item.en }}</p>
			
 
				+          </div>
			
 
				+      </swiper-slide>
			
 
				+    </swiper>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
			
 
				+import "swiper/css/swiper.css";
			
 
				+import { data } from "../components/data";
			
 
				+
			
 
				+export default {
			
 
				+  computed: {
			
 
				+    swiper() {
			
 
				+      return this.$refs.listSwiper.$swiper;
			
 
				+    },
			
 
				+    swiperOption() {
			
 
				+      // let that = this
			
 
				+      return {
			
 
				+        slidesPerView: "auto",
			
 
				+        autoplay: false,
			
 
				+        direction : 'vertical',
			
 
				+        on: {
			
 
				+          click: function () {
			
 
				+            // 这里有坑
			
 
				+            // 需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法 
			
 
				+            // console.log(this); // -> Swiper
			
 
				+            // 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内。            const realIndex = this.realIndex;
			
 
				+            
			
 
				+            // that.goto(this.realIndex); 
			
 
				+          },
			
 
				+        },
			
 
				+      };
			
 
				+    },
			
 
				+    items() {
			
 
				+      return data['cjxz'];
			
 
				+    }
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      showNext: 0,
			
 
				+      showPre: 0,
			
 
				+    };
			
 
				+  },
			
 
				+  methods: {
			
 
				+    
			
 
				+    goto(item) {
			
 
				+      
			
 
				+      let {url} = item
			
 
				+      if (url === this.$route.query.ifr) {
			
 
				+        return
			
 
				+      }
			
 
				+
			
 
				+      this.$router.push({
			
 
				+            name:'list',
			
 
				+            query:{
			
 
				+              ifr:url || ''
			
 
				+            }
			
 
				+          })
			
 
				+      this.$emit('close',true)
			
 
				+     
			
 
				+    },
			
 
				+  },
			
 
				+  components: {
			
 
				+    Swiper,
			
 
				+    SwiperSlide,
			
 
				+  },
			
 
				+  directives: {
			
 
				+    swiper: directive,
			
 
				+  },
			
 
				+  props:['activeType'],
			
 
				+  mounted() {
			
 
				+    this.$emit("swiper1", this.swiper);
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+<style lang="less" scoped>
			
 
				+.swiper-container {
			
 
				+  height: 100%;
			
 
				+  width: 100%;
			
 
				+  position: fixed;
			
 
				+  right: 0;
			
 
				+  top: 0;
			
 
				+  .swiper-wrapper {
			
 
				+    width: 50%;
			
 
				+    height: 100%;
			
 
				+    float: right;
			
 
				+    .swiper-slide {
			
 
				+      transform-style: preserve-3d;
			
 
				+      height: auto!important;
			
 
				+      background: linear-gradient(to right,#0075BC,#06816F);
			
 
				+      .sw-card{
			
 
				+        text-align: center;
			
 
				+        margin-bottom: 16px;
			
 
				+        img {
			
 
				+          overflow: hidden;
			
 
				+          width: calc(100% - 20px);
			
 
				+        }
			
 
				+        p{
			
 
				+          color: #fff;
			
 
				+          text-align: left;
			
 
				+          margin-left: 10px;
			
 
				+          font-size: 12px;
			
 
				+          &:first-of-type{
			
 
				+            font-size: 14px;
			
 
				+            font-weight: bold;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+@media screen and (min-height: 481px) {
			
 
				+
			
 
				+}
			
 
				+
			
 
				+@media screen and (min-height: 569px) {
			
 
				+  
			
 
				+}
			
 
				+</style>
			
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,3 @@
 
				+module.exports = {
			
 
				+  publicPath: "./"
			
 
				+};