添加链接

src/App.vue

@@ -18,12 +18,7 @@ export default {
 #app {
   width: 100%;
   height: 100%;
-  background: url('~@/assets/images/background.png') no-repeat center center / cover;
+  background: linear-gradient(to bottom, rgb(7,4,17) 0%, rgb(25, 25, 50));
 }
 
-@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
-  #app {
-    background-image: url('~@/assets/images/background@2x.png');
-  }
-}
 </style>

src/components/cir-slide/index.vue

@@ -3,7 +3,7 @@
     <div class="pers" :style="{height: height + 'px', perspective: height * 2 + 'px'}">
       <div
         :style="{
-          transform: 'translateZ('+(-3.3*height)+'px)  rotateX(-5deg) rotateY(' + initY + 'deg)',
+          transform: 'translateZ('+(-3*height)+'px)  rotateX(-5deg) rotateY(' + initY + 'deg)',
           transformOrigin: height / 2 + 'px ' + height / 2 + 'px'
         }"
         :class="{animation: !pauseAnimation}"
@@ -70,7 +70,6 @@ export default {
   },
   watch: {
     index (newVal) {
-      console.log('-0-')
       this.$emit('focuschange', this.items[newVal])
     }
   },

src/main.js

@@ -3,8 +3,10 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import getUrl from './url'
 
 Vue.config.productionTip = false
+Vue.prototype.getUrl = getUrl
 
 /* eslint-disable no-new */
 new Vue({

src/pages/collection/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="coll-layout" ref="layout">
     <cir-slide :items="items"  @focuschange="change" class="cir-slide">
-      <img slot="item" slot-scope="{data}" class="img-item" :src="data.abbr" :class="{active: active === data}">
+      <img slot="item" slot-scope="{data}" class="img-item" :src="data.abbr" :class="{active: active === data}" @click="clickHandle(data)">
     </cir-slide>
     <h3 class="title">{{active.title}}</h3>
   </div>
@@ -86,10 +86,14 @@ export default {
   },
   methods: {
     change (item) {
-      console.log(item)
-      if (this.active === item) {
+      this.active = item
+    },
+    clickHandle (item) {
+      let url = this.getUrl(item.title)
+      if (url) {
+        this.$router.push({name: 'external', params: {src: url}})
       } else {
-        this.active = item
+        alert('该文物正在努力建设中')
       }
     }
   },

src/pages/collection/style.css

@@ -11,7 +11,7 @@
   width: 190px;
   height: 190px;
   display: block;
-  filter: blur(4px);
+  /* filter: blur(4px); */
 }
 
 
@@ -31,5 +31,5 @@
 }
 
 .active {
-  filter: blur(0);
+  /* filter: blur(0); */
 }

src/pages/country_addr/index.vue

@@ -100,8 +100,13 @@ export default {
     }
   },
   methods: {
-    clickHandle () {
-
+    clickHandle (item) {
+      let url = this.getUrl(item.title)
+      if (url) {
+        this.$router.push({name: 'external', params: {src: url}})
+      } else {
+        alert('该文物正在努力建设中')
+      }
     }
   },
   components: {slide}

src/pages/country_time/index.vue

@@ -9,7 +9,7 @@
           <div class="country">
             <img :src="item.country">
           </div>
-          <div class="relic">
+          <div class="relic" @click="clickHandle(item)">
             <img :src="item.relic">
             <h3>{{item.title}}</h3>
             <p>{{item.time}}</p>
@@ -125,6 +125,17 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    clickHandle (item) {
+      console.log(item.title)
+      let url = this.getUrl(item.title)
+      if (url) {
+        this.$router.push({name: 'external', params: {src: url}})
+      } else {
+        alert('该文物正在努力建设中')
+      }
+    }
   }
 }
 </script>
@@ -154,13 +165,7 @@ export default {
 }
 
 .content {
-  background: url('~@/assets/images/ct_linear.png') repeat-y top center / 44% auto;
-}
-
-@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
-  .content {
-    background-image: url('~@/assets/images/ct_linear@2x.png');
-  }
+  background: url('~@/assets/images/ct_linear.png') repeat-y top center / 44% auto, linear-gradient(to bottom, rgb(7,4,17) 0%, rgb(25, 25, 50));
 }
 
 .ct-item {

src/pages/exhibition/index.vue

@@ -4,7 +4,7 @@
       <div slot="item"
         slot-scope="{data, index}"
         class="item"
-        @click="clickHandle(index)"
+        @click="clickHandle(index, data)"
         :style="{backgroundImage: 'url('+data.image+')'}">
       </div>
     </slide>
@@ -23,16 +23,20 @@ export default {
   data () {
     let items = [{
       image: require('@/assets/images/exh_1.jpg'),
-      title: 'Hetjens Hall'
+      title: 'Hetjens Hall',
+      url: 'http://www.4dmodel.com/SuperTwo/index.html?m=409'
     }, {
       image: require('@/assets/images/exh_2.jpg'),
-      title: 'Schneider Collection'
+      title: 'Schneider Collection',
+      url: 'http://www.4dmodel.com/SuperTwo/index.html?m=410'
     }, {
       image: require('@/assets/images/exh_3.jpg'),
-      title: 'Blue Onion Exhibition'
+      title: 'Blue Onion Exhibition',
+      url: 'http://www.4dmodel.com/SuperTwo/index.html?m=411'
     }, {
       image: require('@/assets/images/exh_4.jpg'),
-      title: 'Alle Farben Chinas'
+      title: 'Alle Farben Chinas',
+      url: 'http://www.4dmodel.com/SuperTwo/index.html?m=412'
     }]
 
     return {
@@ -42,9 +46,9 @@ export default {
     }
   },
   methods: {
-    clickHandle (index) {
-      if (this.focus === index) {
-        console.log(this.title)
+    clickHandle (index, item) {
+      if (this.active === item) {
+        this.$router.push({name: 'external', params: {src: this.items[index].url}})
       } else {
         this.focus = index
       }

src/pages/external/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <iframe :src="src" frameborder="0"></iframe>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      src: this.$route.params.src
+    }
+  },
+  activated () {
+    this.src = this.$route.params.src
+  }
+}
+</script>
+
+<style scoped>
+iframe {
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+}
+</style>

src/router/index.js

@@ -5,6 +5,7 @@ import Collection from '@/pages/collection/'
 import Exhibition from '@/pages/exhibition/'
 import CountryTime from '@/pages/country_time/'
 import CountryAddr from '@/pages/country_addr/'
+import External from '@/pages/external/'
 
 Vue.use(Router)
 
@@ -34,6 +35,10 @@ export default new Router({
       path: '/country_addr',
       name: 'country_addr',
       component: CountryAddr
+    }, {
+      path: '/external/:src',
+      name: 'external',
+      component: External
     }
   ]
 })

src/url.js

@@ -0,0 +1,23 @@
+let urls = {
+  '牧童归家': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger16',
+  '埃米尔·': '加莱的盘子 http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger08',
+  '绝代艳后玛丽·': '安托瓦内特花瓶 http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger09',
+  '陶瓷壶': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger11',
+  '皇家花瓶': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger15',
+  '吃古柯叶的祭司': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger02',
+  '花瓶': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger05',
+  '莫切人物陶罐像': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger01',
+  '锡釉陶器': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger10',
+  '双耳细颈瓶颈瓶': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger12',
+  '黄金盘': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger07',
+  '伊兹尼克瓶克瓶': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger03',
+  '好时光”': '龙像 http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger14',
+  '琴图里佩瓷钵': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger13',
+  '陶制火鸡造型盖碗': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger06',
+  '青瓷盘': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger04'
+}
+
+export default (key) => {
+  key = Object.keys(urls).find(item => ~item.indexOf(key))
+  return urls[key]
+}