tremble 6 tahun lalu
induk
melakukan
f3572ec8d0
70 mengubah file dengan 2304 tambahan dan 859 penghapusan
  1. 2 1
      build/utils.js
  2. 2 2
      build/webpack.base.conf.js
  3. 1 1
      config/index.js
  4. 6 1
      config/prod.env.js
  5. 2 2
      index.html
  6. 5 2
      package.json
  7. 67 1
      src/App.vue
  8. TEMPAT SAMPAH
      src/assets/images/bg.jpg
  9. TEMPAT SAMPAH
      src/assets/images/cover/东岸绵始大楼.jpg
  10. TEMPAT SAMPAH
      src/assets/images/cover/会同北碉楼.jpg
  11. TEMPAT SAMPAH
      src/assets/images/cover/会同北闸门.jpg
  12. TEMPAT SAMPAH
      src/assets/images/cover/会同南碉楼.jpg
  13. TEMPAT SAMPAH
      src/assets/images/cover/会同南闸门.jpg
  14. TEMPAT SAMPAH
      src/assets/images/cover/会同莫氏大宅.jpg
  15. TEMPAT SAMPAH
      src/assets/images/cover/会同莫氏大宗祠.jpg
  16. TEMPAT SAMPAH
      src/assets/images/cover/佩玉梁公祠.jpg
  17. TEMPAT SAMPAH
      src/assets/images/cover/北沙卢氏孖祠.jpg
  18. TEMPAT SAMPAH
      src/assets/images/cover/古氏大宗祠.jpg
  19. TEMPAT SAMPAH
      src/assets/images/cover/唐家古围墙.jpg
  20. TEMPAT SAMPAH
      src/assets/images/cover/唐家平里庙.jpg
  21. TEMPAT SAMPAH
      src/assets/images/cover/唐家梁氏大宗祠(振绪堂).jpg
  22. TEMPAT SAMPAH
      src/assets/images/cover/唐家湾国防建设烈士墓.jpg
  23. TEMPAT SAMPAH
      src/assets/images/cover/唐家湾建设和保卫海岛烈士墓.jpg
  24. TEMPAT SAMPAH
      src/assets/images/cover/唐家湾抗日烈士纪念碑.jpg
  25. TEMPAT SAMPAH
      src/assets/images/cover/唐家湾解放万山群岛烈士纪念碑.jpg
  26. TEMPAT SAMPAH
      src/assets/images/cover/唐家车站旧址.jpg
  27. TEMPAT SAMPAH
      src/assets/images/cover/大王角灯塔.jpg
  28. TEMPAT SAMPAH
      src/assets/images/cover/太史第(唐宝锷故居).jpg
  29. TEMPAT SAMPAH
      src/assets/images/cover/官塘乡主庙.jpg
  30. TEMPAT SAMPAH
      src/assets/images/cover/宪尧唐公祠.jpg
  31. TEMPAT SAMPAH
      src/assets/images/cover/寿山梁公祠.jpg
  32. TEMPAT SAMPAH
      src/assets/images/cover/易初祠.jpg
  33. TEMPAT SAMPAH
      src/assets/images/cover/月奇梁公祠.jpg
  34. TEMPAT SAMPAH
      src/assets/images/cover/步九梁公祠.jpg
  35. TEMPAT SAMPAH
      src/assets/images/cover/淇澳天后宫.jpg
  36. TEMPAT SAMPAH
      src/assets/images/cover/淇澳文昌宫.jpg
  37. TEMPAT SAMPAH
      src/assets/images/cover/淇澳祖庙.jpg
  38. TEMPAT SAMPAH
      src/assets/images/cover/淇澳钟氏大宗祠.jpg
  39. TEMPAT SAMPAH
      src/assets/images/cover/清晓古公祠.jpg
  40. TEMPAT SAMPAH
      src/assets/images/cover/瑞芝唐公祠.jpg
  41. TEMPAT SAMPAH
      src/assets/images/cover/苏兆征故居.jpg
  42. TEMPAT SAMPAH
      src/assets/images/cover/诚斋谭公祠.jpg
  43. TEMPAT SAMPAH
      src/assets/images/cover/那洲南门楼.jpg
  44. TEMPAT SAMPAH
      src/assets/images/cover/那洲梁氏大宅.jpg
  45. TEMPAT SAMPAH
      src/assets/images/cover/那洲炮楼.jpg
  46. TEMPAT SAMPAH
      src/assets/images/cover/青云桥(会同单孔桥).jpg
  47. TEMPAT SAMPAH
      src/assets/images/cover/鸡山三房祠.jpg
  48. TEMPAT SAMPAH
      src/assets/images/default.jpg
  49. TEMPAT SAMPAH
      src/assets/images/img_all_bg.jpg
  50. TEMPAT SAMPAH
      src/assets/images/xiala.png
  51. 4 0
      src/assets/style/public.css
  52. 1 1
      src/components/Plan/index.vue
  53. 17 2
      src/components/Slide/index.vue
  54. 1 9
      src/components/Slider/index.vue
  55. 18 1
      src/components/maps/index.vue
  56. 1218 552
      src/data.js
  57. 3 0
      src/main.js
  58. 144 20
      src/pages/external/index.vue
  59. 10 22
      src/pages/home/index.vue
  60. 20 2
      src/pages/home/style.css
  61. 117 6
      src/pages/imageQuery/index.vue
  62. 10 4
      src/pages/layout/aside/down.vue
  63. 29 12
      src/pages/layout/aside/index.vue
  64. 7 1
      src/pages/layout/index.vue
  65. 242 74
      src/pages/list/index.vue
  66. 141 26
      src/pages/list/style.css
  67. 128 70
      src/pages/map/index.vue
  68. 36 2
      src/pages/map/style.css
  69. 25 5
      src/pages/search/index.vue
  70. 48 40
      src/router/index.js

+ 2 - 1
build/utils.js

@@ -47,7 +47,8 @@ exports.cssLoaders = function (options) {
     if (options.extract) {
       return ExtractTextPlugin.extract({
         use: loaders,
-        fallback: 'vue-style-loader'
+        fallback: 'vue-style-loader',
+        publicPath:'../../'
       })
     } else {
       return ['vue-style-loader'].concat(loaders)

+ 2 - 2
build/webpack.base.conf.js

@@ -58,8 +58,8 @@ module.exports = {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'url-loader',
         options: {
-          limit: 1024*1000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+          limit: 1000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]'),
         }
       },
       {

+ 1 - 1
config/index.js

@@ -13,7 +13,7 @@ module.exports = {
     proxyTable: {},
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: '192.168.0.103', // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

+ 6 - 1
config/prod.env.js

@@ -1,4 +1,9 @@
 'use strict'
+
+
+let params = process.argv.splice(2)[0]||'prod';
+
 module.exports = {
-  NODE_ENV: '"production"'
+  NODE_ENV: '"production"',
+  ISLOCAL: '"'+params+'"'
 }

+ 2 - 2
index.html

@@ -6,8 +6,8 @@
     <meta name="force-rendering" content="webkit"/>
     <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-    <!-- <link rel="apple-touch-icon" sizes="180x180" href="static/img/favicon.ico"> -->
-    <!-- <link rel="icon" type="image/png" href="static/img/favicon.ico" sizes="192x192"> -->
+    <link rel="apple-touch-icon" sizes="180x180" href="http://4d-tjw.oss-cn-shenzhen.aliyuncs.com/images/favicon.png">
+    <link rel="icon" type="image/png" href="http://4d-tjw.oss-cn-shenzhen.aliyuncs.com/images/favicon.png" sizes="192x192">
     <title>珠海国家高新区-不可移动文物一张图</title>
   </head>
   <body>

+ 5 - 2
package.json

@@ -8,16 +8,19 @@
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
     "lint": "eslint --ext .js,.vue src",
-    "build": "node build/build.js"
+    "build": "node build/build.js",
+    "local": "node build/build.js  --local"
   },
   "dependencies": {
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.2.0-rc.2",
     "jquery": "^2.1.1",
+    "jsonp": "^0.2.1",
     "vue": "^2.5.2",
     "vue-concise-slider": "^3.3.8",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "weixin-js-sdk": "^1.4.0-test"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

+ 67 - 1
src/App.vue

@@ -7,9 +7,75 @@
 <script>
 import '@/assets/style/reset.css'
 import '@/assets/style/public.css'
+import wx from 'weixin-js-sdk'
+import jsonp from 'jsonp'
 
 export default {
-  name: 'App'
+  name: 'App',
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+    wxShare () {
+      let url = location.href.split('#')[0]
+      jsonp('https://www.4dage.com/wechat/jssdk/share/?uri=' +
+  window.escape(url) + '&name=4dageshare', 'success_jsonp', function (err, data) {
+        if (err) {
+          console.err(err)
+          console.log('出错啦')
+        } 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: '珠海国家高新区-不可移动文物一张图', //  标题
+            desc: '美好不应被损毁,我们保护它,也让您可以零距离欣赏', //  描述
+            link: window.location.href, //  分享的URL,必须和当前打开的网页的URL是一样的
+            imgUrl: 'http://4d-tjw.oss-cn-shenzhen.aliyuncs.com/images/share.jpg', //  缩略图地址
+            success: function () {
+
+            },
+            cancel: function () {
+
+            }
+          }
+          wx.onMenuShareAppMessage(shareData)
+          wx.onMenuShareTimeline(shareData)
+          wx.onMenuShareQQ(shareData)
+          wx.onMenuShareQZone(shareData)
+        })
+      })
+    }
+  },
+  mounted () {
+    this.wxShare()
+  }
 }
 </script>
 

TEMPAT SAMPAH
src/assets/images/bg.jpg


TEMPAT SAMPAH
src/assets/images/cover/东岸绵始大楼.jpg


TEMPAT SAMPAH
src/assets/images/cover/会同北碉楼.jpg


TEMPAT SAMPAH
src/assets/images/cover/会同北闸门.jpg


TEMPAT SAMPAH
src/assets/images/cover/会同南碉楼.jpg


TEMPAT SAMPAH
src/assets/images/cover/会同南闸门.jpg


TEMPAT SAMPAH
src/assets/images/cover/会同莫氏大宅.jpg


TEMPAT SAMPAH
src/assets/images/cover/会同莫氏大宗祠.jpg


TEMPAT SAMPAH
src/assets/images/cover/佩玉梁公祠.jpg


TEMPAT SAMPAH
src/assets/images/cover/北沙卢氏孖祠.jpg


TEMPAT SAMPAH
src/assets/images/cover/古氏大宗祠.jpg


TEMPAT SAMPAH
src/assets/images/cover/唐家古围墙.jpg


TEMPAT SAMPAH
src/assets/images/cover/唐家平里庙.jpg


TEMPAT SAMPAH
src/assets/images/cover/唐家梁氏大宗祠(振绪堂).jpg


TEMPAT SAMPAH
src/assets/images/cover/唐家湾国防建设烈士墓.jpg


TEMPAT SAMPAH
src/assets/images/cover/唐家湾建设和保卫海岛烈士墓.jpg


TEMPAT SAMPAH
src/assets/images/cover/唐家湾抗日烈士纪念碑.jpg


TEMPAT SAMPAH
src/assets/images/cover/唐家湾解放万山群岛烈士纪念碑.jpg


TEMPAT SAMPAH
src/assets/images/cover/唐家车站旧址.jpg


TEMPAT SAMPAH
src/assets/images/cover/大王角灯塔.jpg


TEMPAT SAMPAH
src/assets/images/cover/太史第(唐宝锷故居).jpg


TEMPAT SAMPAH
src/assets/images/cover/官塘乡主庙.jpg


TEMPAT SAMPAH
src/assets/images/cover/宪尧唐公祠.jpg


TEMPAT SAMPAH
src/assets/images/cover/寿山梁公祠.jpg


TEMPAT SAMPAH
src/assets/images/cover/易初祠.jpg


TEMPAT SAMPAH
src/assets/images/cover/月奇梁公祠.jpg


TEMPAT SAMPAH
src/assets/images/cover/步九梁公祠.jpg


TEMPAT SAMPAH
src/assets/images/cover/淇澳天后宫.jpg


TEMPAT SAMPAH
src/assets/images/cover/淇澳文昌宫.jpg


TEMPAT SAMPAH
src/assets/images/cover/淇澳祖庙.jpg


TEMPAT SAMPAH
src/assets/images/cover/淇澳钟氏大宗祠.jpg


TEMPAT SAMPAH
src/assets/images/cover/清晓古公祠.jpg


TEMPAT SAMPAH
src/assets/images/cover/瑞芝唐公祠.jpg


TEMPAT SAMPAH
src/assets/images/cover/苏兆征故居.jpg


TEMPAT SAMPAH
src/assets/images/cover/诚斋谭公祠.jpg


TEMPAT SAMPAH
src/assets/images/cover/那洲南门楼.jpg


TEMPAT SAMPAH
src/assets/images/cover/那洲梁氏大宅.jpg


TEMPAT SAMPAH
src/assets/images/cover/那洲炮楼.jpg


TEMPAT SAMPAH
src/assets/images/cover/青云桥(会同单孔桥).jpg


TEMPAT SAMPAH
src/assets/images/cover/鸡山三房祠.jpg


TEMPAT SAMPAH
src/assets/images/default.jpg


TEMPAT SAMPAH
src/assets/images/img_all_bg.jpg


TEMPAT SAMPAH
src/assets/images/xiala.png


+ 4 - 0
src/assets/style/public.css

@@ -4,6 +4,10 @@
   overflow: hidden;
   position: relative;
 }
+*{
+  -webkit-tap-highlight-color:transparent;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
 
 .clear::after {
   content: '';

+ 1 - 1
src/components/Plan/index.vue

@@ -178,7 +178,7 @@ export default {
       oldVal && this.markerArr[oldVal].seftadditional.pause()
       newVal && this.markerArr[newVal].seftadditional.play()
     },
-    
+
     lngLatArr (val) {
       if (val !== 'ignore') {
         this.init()

+ 17 - 2
src/components/Slide/index.vue

@@ -4,7 +4,7 @@
       <slot name="up" />
     </a>
     <div class="slide-layout">
-      <div :style="layoutStyle" class="continure">
+      <div :style="layoutStyle" class="continure" :class="{'m-continure':ismobile}">
         <div v-for="(iscreen, index) in screens" :key="index" :style="itemStyle" class="item">
           <slot name="item" :data="iscreen" :index="index" />
         </div>
@@ -18,6 +18,8 @@
 </template>
 
 <script>
+import browser from '@/util/browser'
+
 export default {
   props: {
     screens: {
@@ -31,7 +33,9 @@ export default {
   },
   data () {
     return {
-      index: this.current
+      index: this.current,
+      ismobile: browser.mobile
+
     }
   },
   computed: {
@@ -90,6 +94,7 @@ export default {
   background-color: #fa3800;
   padding: 12px 15px;
   cursor: pointer;
+  transform: translateY(-50%)
 }
 
 .up {
@@ -103,5 +108,15 @@ export default {
 .continure {
   overflow: hidden;
   transition: transform .5s ease;
+  display: flex;
+  align-items: center;
+}
+
+.m-continure{
+  height: 40vh;
+}
+.m-continure .item{
+  text-align: center;
 }
+
 </style>

+ 1 - 9
src/components/Slider/index.vue

@@ -7,15 +7,7 @@
       <div class="bg-darkgrey-hand"></div>
       <ul class="slider-ul">
         <li class="slider-ul-first"><i class="icon-dian"></i></li>
-        <li><i class="icon-dian"></i></li>
-        <li><i class="icon-dian"></i></li>
-        <li><i class="icon-dian"></i></li>
-        <li><i class="icon-dian"></i></li>
-        <li><i class="icon-dian"></i></li>
-        <li><i class="icon-dian"></i></li>
-        <li><i class="icon-dian"></i></li>
-        <li><i class="icon-dian"></i></li>
-        <li><i class="icon-dian"></i></li>
+        <li v-for="(item, i) in 9" :key="i"><i class="icon-dian"></i></li>
       </ul>
     </div>
     <div class="slide-selected"></div>

+ 18 - 1
src/components/maps/index.vue

@@ -181,7 +181,8 @@ export default {
     clickHandle (ev) {
       let title = navs[ev.target.className.baseVal.substring(5)]
       if (title) {
-        this.$router.push({name: 'map', params: {title: title}})
+        let link = this.$isLocal ? {name: 'list', params: {title: title, type: '全部'}} : {name: 'map', params: {title: title}}
+        this.$router.push(link)
       }
     }
   }
@@ -197,6 +198,8 @@ export default {
 }
 .st:hover {
   fill: #f13800;
+  -webkit-tap-highlight-color:transparent;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .st0 {
@@ -270,4 +273,18 @@ export default {
   transform-origin: 420px 690px;
   fill: #bbc5bc;
 }
+
+@media screen and (max-width: 1400px){
+  .layout{
+    position: relative;
+  }
+  .layout > svg{
+    width: 900px;
+    height: 650px;
+  }
+  .st {
+    font-size: 14px;
+  }
+}
+
 </style>

File diff ditekan karena terlalu besar
+ 1218 - 552
src/data.js


+ 3 - 0
src/main.js

@@ -9,9 +9,12 @@ import '@/assets/icon/iconfont.css'
 
 // axios.defaults.baseURL = 'http://192.168.0.249:8080/'
 // axios.defaults.baseURL = '/'
+const isLocal = process.env.NODE_ENV === 'development' ? false : ~(process.env.ISLOCAL.indexOf('local'))
+
 Vue.config.productionTip = false
 Vue.prototype.$http = axios
 Vue.prototype.$bus = new Vue()
+Vue.prototype.$isLocal = isLocal
 
 /* eslint-disable no-new */
 new Vue({

+ 144 - 20
src/pages/external/index.vue

@@ -3,15 +3,24 @@
     <div v-if="ismobile" class="top-layer">
       <a @click="clickHandle" class="rad"><i class="iconfont icon-left"></i>返回</a>
       <a @click="exitHandle" class="xiangce" v-if="key" :class="{active: big}">大场景</a>
-      <a @click="xiangceHandle" class="xiangce" v-if="key" :class="{active: !big}">相册</a>
+      <a @click="xiangceHandle" class="xiangce" v-if="key&&imgs.length>0" :class="{active: !big}">相册</a>
     </div>
     <template v-else>
       <a @click="clickHandle" class="rad"><i class="iconfont icon-left"></i>返回</a>
       <!-- <a @click="xiangceHandle" class="xiangce" v-if="key">相册</a> -->
-      <select @change="changeHandle" class="ncxihiasj" v-model="asdasd" v-if="key">
-        <option value="big">大场景</option>
-        <option value="xiangce">相册</option>
-      </select>
+        <select @change="changeHandle" class="ncxihiasj" v-model="asdasd" v-if="key">
+          <option value="big">大场景</option>
+          <option v-if="imgs.length>0" value="xiangce">相册</option>
+        </select>
+        <div class="r-aside" :class="{'show':show}" @click.stop>
+          <div class="image-title">{{name}}</div>
+          <div class="image-detail">
+            <p v-for="(item,i) in introduce" :key="i">{{item}}</p>
+          </div>
+          <div class="switch" @click="show = !show" @touchmove.prevent>
+            <i class="iconfont" :class="show ? 'icon-left' : 'icon-right'"></i>
+          </div>
+        </div>
     </template>
 
     <template v-if="ismobile">
@@ -21,15 +30,22 @@
         <div class="image-layout">
           <Slide :screens="screens" :current="0">
             <i class="iconfont icon-left" slot="up"></i>
-            <img slot="item" slot-scope="{data}" :src="data" class="image-item">
+            <div slot="item" slot-scope="{data}" class="image-item" :style="{background:`url(${data}) no-repeat center center`,backgroundSize:'contain'}"  @click.stop></div>
+            <!-- <img slot="item" slot-scope="{data}" :src="data" class="image-item"> -->
             <i class="iconfont icon-right" slot="next"></i>
           </Slide>
+          <div class="image-introduce">
+            <div class="intro-title">{{name}}</div>
+            <div class="intro-detail">
+              <p v-for="(item,i) in introduce" :key="i">{{item}}</p>
+            </div>
+          </div>
         </div>
       </div>
     </template>
     <template v-else>
       <iframe :src="url" frameborder="0"></iframe>
-      <imageQuery :screens="screens" @exitHandle="exitHandle" />
+      <imageQuery :show="show" :screens="screens" @exitHandle="exitHandle" />
     </template>
   </div>
 </template>
@@ -44,7 +60,8 @@ export default {
   components: { imageQuery, Slide },
   data () {
     let key = Object.keys(data.data).find(id => this.$route.params.id === id)
-    if (!data.data[key].data) {
+
+    if (!key) {
       key = null
     }
     return {
@@ -52,6 +69,7 @@ export default {
       urls: [],
       key,
       big: true,
+      show: false,
       ismobile: browser.mobile,
       screens: null
     }
@@ -59,6 +77,19 @@ export default {
   computed: {
     url () {
       return this.$route.params.url
+    },
+    imgs () {
+      let id = Object.keys(data.data).find(key => this.$route.params.id === key)
+
+      return data.data[id].data || []
+    },
+    name () {
+      let id = Object.keys(data.data).find(key => this.$route.params.id === key)
+      return data.data[id].name || ''
+    },
+    introduce () {
+      let id = Object.keys(data.data).find(key => this.$route.params.id === key)
+      return data.data[id].introduce || []
     }
   },
   methods: {
@@ -82,7 +113,17 @@ export default {
       this.asdasd = 'big'
     },
     clickHandle () {
-      this.$router.back()
+      if (this.$route.query.show) {
+        let {show, title, type} = this.$route.query
+        this.$router.push({
+          name: 'item',
+          params: {
+            show, title, type
+          }
+        })
+      } else {
+        this.$router.back()
+      }
       // while (global.paths.length !== 0) {
       //   let path = global.paths.pop()
 
@@ -121,7 +162,7 @@ export default {
   background-color: #fa3800;
   left: 10px;
   top: 10px;
-  padding: 8px 15px;
+  padding: 8px 20px 10px 16px;
   cursor: pointer;
   z-index: 999;
 }
@@ -142,7 +183,7 @@ export default {
 }
 
 .asjdfioasfhuioasfh {
-  height: calc(100% - 50px);
+  height: 100%;
   background-color: #000;
 }
 
@@ -179,20 +220,21 @@ export default {
 
 .ncxihiasj {
   position: absolute;
-  left: 100px;
+  left: 112px;
   border: 1px solid #fff;
   z-index: 999;
-  background-color: transparent;
+  font-size: 1em;
+  background: url('~@/assets/images/xiala.png') center right 6px no-repeat;
+  background-size: 20%;
   color: #fff;
-  top: 12px;
-  width: 65px;
+  top: 10px;
+  width: 90px;
   border-radius: 3px;
-  height: 30px;
+  height: 34px;
+  line-height: 34px;
   text-align: center;
   padding: 0 10px;
-  appearance:none;
-  -moz-appearance:none;
-  -webkit-appearance:none;
+  cursor: pointer;
 }
 
 .ncxihiasj option{
@@ -207,7 +249,7 @@ export default {
 
 .image-dialog {
   position: fixed;
-  z-index: 9999999999999999999;
+  z-index: 9999;
   left: 0;
   top: 0;
   right: 0;
@@ -238,5 +280,87 @@ export default {
 
 .image-item {
   width: 100%;
+  height: 100%;
+}
+
+.r-aside{
+  box-sizing: border-box;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 350px;
+  height: 100%;
+  background-color: #fffbf8;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 0;
+  border-left: 1px solid #f1c4a3;
+  z-index: 999999;
+  transform: translateX(0);
+  transition: transform .3s ease;
+}
+
+.r-aside.show{
+  transform: translateX(350px);
+  transition: transform .3s ease;
+}
+
+.r-aside .image-title{
+  font-weight: bold;
+  font-size: 18px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #f1c4a3;
+  margin: 0 20px;
+}
+.r-aside .image-detail{
+  padding: 15px 0;
+  height: 100%;
+  overflow-y: scroll;
+  margin: 0 10px 0 20px;
+}
+
+.r-aside .image-detail p{
+  text-indent: 32px;
+  line-height: 1.8;
+}
+
+.switch {
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #fa3800;
+  width: 14px;
+  height: 80px;
+  color: #fff;
+  line-height: 80px;
+  text-align: center;
+  cursor: pointer;
+  z-index: 9999999;
+}
+
+.image-introduce{
+  color:#fff;
+  padding:20px 10px;
+  line-height:1.5;
+
+}
+.image-introduce .intro-title{
+  font-size:18px;
+  font-weight:bold;
+  margin-bottom:20px;
+}
+.image-introduce .intro-detail{
+  height: 150px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.image-introduce .intro-detail p{
+  text-indent:32px;
+}
+
+.asjdfioasfhuioasfh >>> .ctrl{
+  top:25%;
 }
 </style>

+ 10 - 22
src/pages/home/index.vue

@@ -6,18 +6,18 @@
           <!-- <img src="@/assets/images/address.png" alt=""> -->
           <maps />
           <!-- <img :src="item.img" v-for="item in maps" :key="item.cls" class="map-item" :class="'map-' + item.cls"> -->
-          <router-link v-for="item in address" :key="item.name" :class="item.name" :to="{name: 'map', params: {title: item.text}}">
+          <a v-for="item in address" :key="item.name" :class="item.name" @click="to(item)">
             {{item.text}}<span>{{item.count}}</span>
-          </router-link>
+          </a>
         </div>
       </ViewOperation>
       <div class="address wide" v-else>
         <!-- <img src="@/assets/images/address.png" alt=""> -->
         <maps />
         <!-- <img :src="item.img" v-for="item in maps" :key="item.cls" class="map-item" :class="'map-' + item.cls"> -->
-        <router-link v-for="item in address" :key="item.name" :class="item.name" :to="{name: 'map', params: {title: item.text}}">
+        <a v-for="item in address" :key="item.name" :class="item.name" @click="to(item)">
           {{item.text}}<span>{{item.count}}</span>
-        </router-link>
+        </a>
       </div>
     </div>
   </div>
@@ -29,24 +29,6 @@ import browser from '@/util/browser'
 import ViewOperation from '@/components/ViewOperation'
 import maps from '@/components/maps'
 
-// const maps = [
-//   {cls: 'bs', img: require('@/assets/images/bs.png')},
-//   {cls: 'da', img: require('@/assets/images/da.png')},
-//   {cls: 'gt', img: require('@/assets/images/gt.png')},
-//   {cls: 'hh', img: require('@/assets/images/hh.png')},
-//   {cls: 'ht', img: require('@/assets/images/ht.png')},
-//   {cls: 'jf', img: require('@/assets/images/jf.png')},
-//   {cls: 'js', img: require('@/assets/images/js.png')},
-//   {cls: 'nt', img: require('@/assets/images/nt.png')},
-//   {cls: 'nz', img: require('@/assets/images/nz.png')},
-//   {cls: 'qa', img: require('@/assets/images/qa.png')},
-//   {cls: 'sc', img: require('@/assets/images/sc.png')},
-//   {cls: 'tj', img: require('@/assets/images/tj.png')},
-//   {cls: 'tl', img: require('@/assets/images/tl.png')},
-//   {cls: 'xc', img: require('@/assets/images/xc.png')},
-//   {cls: 'yf', img: require('@/assets/images/yf.png')},
-//   {cls: 'yx', img: require('@/assets/images/yx.png')}
-// ]
 const setting = [
   {name: 'yf', text: '永丰社区'},
   {name: 'bs', text: '北沙社区'},
@@ -92,6 +74,12 @@ export default {
   components: {
     ViewOperation,
     maps
+  },
+  methods: {
+    to (item) {
+      let link = this.$isLocal ? {name: 'list', params: {title: item.text, type: '全部'}} : {name: 'map', params: {title: item.text}}
+      this.$router.push(link)
+    }
   }
 }
 </script>

+ 20 - 2
src/pages/home/style.css

@@ -2,7 +2,6 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  background: #fff url('~@/assets/images/bg.jpg') center center;
 }
 
 .layout.wide {
@@ -123,7 +122,7 @@
 }
 
 .yx {
-  top: 96%;
+  top: 94%;
   left: 58%;
 }
 
@@ -152,3 +151,22 @@
   width: 17.5%;
   top: 47.5%;
 }
+
+@media screen and (max-width: 1400px){
+  .address {
+    width: 900px;
+    height: 650px;
+  }
+  .nz {
+    top: 60%;
+    left: 10%;
+  }
+  .yx {
+    top: 90%;
+    left: 57%;
+  }
+  .hh{
+    top:57%;
+    left: 64%;
+  }
+}

+ 117 - 6
src/pages/imageQuery/index.vue

@@ -1,24 +1,51 @@
 <template>
-  <div class="image-dialog" v-if="screensa" @click="exitHandle">
+  <div class="image-dialog" :class="{'i-show':isShow}" v-if="screensa" @click="exitHandle">
     <!-- <a @click="exitHandle"><i class="iconfont icon-left"></i>返回</a> -->
-    <div class="image-layout">
+    <div class="image-layout" :class="{'m-image-layout':ismobile}">
       <Slide :screens="screensa" :current="0">
         <i class="iconfont icon-left" slot="up"></i>
-        <img slot="item" slot-scope="{data}" :src="data" class="image-item"  @click.stop>
+        <div v-if="ismobile" slot="item" slot-scope="{data}" class="image-item" :style="{background:`url(${data}) no-repeat center center`,backgroundSize:'contain'}"  @click.stop></div>
+        <img v-else slot="item" slot-scope="{data}" :src="data" class="image-item"  @click.stop>
         <i class="iconfont icon-right" slot="next"></i>
       </Slide>
+      <div class="image-introduce" v-if="ismobile">
+        <div class="intro-title">{{name}}</div>
+        <div class="intro-detail" @touchmove.stop>
+          <p v-for="(item,i) in introduce" :key="i">{{item}}</p>
+        </div>
+      </div>
     </div>
+
+    <template v-if="showAside&&!ismobile">
+      <div class="r-aside" @click.stop>
+        <div class="image-title">{{name}}</div>
+        <div class="image-detail">
+          <p v-for="(item,i) in introduce" :key="i">{{item}}</p>
+        </div>
+        <div class="switch" @click="show = !show" @touchmove.prevent>
+          <i class="iconfont" :class="show ? 'icon-left' : 'icon-right'"></i>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
 <script>
 import Slide from '@/components/Slide'
+import browser from '@/util/browser'
+
 export default {
   components: { Slide },
-  props: ['screens'],
+  props: ['screens', 'show', 'showAside', 'name', 'introduce'],
   data () {
     return {
-      screensa: this.screens
+      screensa: this.screens,
+      ismobile: browser.mobile
+    }
+  },
+  computed: {
+    isShow () {
+      return !this.show && !this.ismobile
     }
   },
   watch: {
@@ -39,12 +66,20 @@ export default {
 
 .image-dialog {
   position: fixed;
-  z-index: 9999999999999999999;
+  z-index: 99999;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0,0,0,0.8);
+  transform: translateX(0);
+  transition: width .3s ease;
+  width: 100%;
+}
+
+.image-dialog.i-show{
+  transition: width .3s ease;
+  width: calc(100% - 350px);
 }
 
 .image-dialog a {
@@ -70,5 +105,81 @@ export default {
 
 .image-item {
   width: 100%;
+  height: 100%;
+}
+
+.r-aside{
+  box-sizing: border-box;
+  position: absolute;
+  right: -350px;
+  top: 0;
+  bottom: 0;
+  width: 350px;
+  height: 100%;
+  background-color: #fffbf8;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 0;
+  border-left: 1px solid #f1c4a3;
+  z-index: 999999;
+}
+
+.r-aside .image-title{
+  font-weight: bold;
+  font-size: 18px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #f1c4a3;
+  margin: 0 20px;
+}
+.r-aside .image-detail{
+  padding: 15px 0;
+  height: 100%;
+  overflow-y: scroll;
+  margin: 0 10px 0 20px;
+}
+
+.r-aside .image-detail p{
+  text-indent: 32px;
+  line-height: 1.8;
 }
+
+.switch {
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #fa3800;
+  width: 14px;
+  height: 80px;
+  color: #fff;
+  line-height: 80px;
+  text-align: center;
+  cursor: pointer;
+  z-index: 9999999;
+}
+
+.image-introduce{
+  color:#fff;
+  padding:20px 10px;
+  line-height:1.5;
+
+}
+.image-introduce .intro-title{
+  font-size:18px;
+  font-weight:bold;
+  margin-bottom:20px;
+}
+.image-introduce .intro-detail{
+  height: 150px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.image-introduce .intro-detail p{
+  text-indent:32px;
+}
+
+.m-image-layout >>> .ctrl{
+  top:25%;
+}
+
 </style>

+ 10 - 4
src/pages/layout/aside/down.vue

@@ -10,7 +10,7 @@
       </span>
     </h3>
     <ul v-show="showContent && children.length > 0">
-      <li v-for="(item, key) in children" :key="key" @click="clickHandle(item)" :class="{active: item.name === active}">
+      <li v-for="(item, key) in children" :key="key" @click.stop="clickHandle(item)" :class="{active: item.name === active}">
         <p>• {{item.name}} <i class="iconfont icon-wancheng1" v-if="item.link || item.data"></i> </p>
       </li>
     </ul>
@@ -44,7 +44,10 @@ export default {
   computed: {
     children () {
       let children = [...this.setting.children]
-
+      let title = this.setting.title
+      if (title === '全部' && this.key) {
+        return []
+      }
       if (this.key) {
         children = children.filter(item => {
           return ~item.name.indexOf(this.keyword)
@@ -56,8 +59,8 @@ export default {
   watch: {
     show (newVal) {
       if (newVal === this.title) {
-        this.showContent = false
-        this.parentClickHandle()
+        this.showContent = true
+        // this.parentClickHandle()
       }
     },
     '$route': {
@@ -106,6 +109,9 @@ export default {
       this.showAll = false
     }
     this.$bus.$on('quxiao', this.quxiaoHandle)
+    this.$bus.$on('closeitem', (data) => {
+      this.showContent = false
+    })
   },
   beforeDestroy () {
     this.$bus.$off('quxiao', this.quxiaoHandle)

+ 29 - 12
src/pages/layout/aside/index.vue

@@ -4,7 +4,7 @@
 
     <div class="search mobileSearch" v-if="ismobile" @touchmove.prevent>
       <a  @click="show = true"><i class="iconfont icon-menu"></i></a>
-      <div @click="$router.push({name: 'search'})">
+      <div @click="$router.push({name: 'search',query:{type:$route.name}})">
         <input placeholder="搜索">
       </div>
       <a><i class="iconfont icon-sousuo"></i></a>
@@ -43,6 +43,7 @@
           <down
             :aaaactive="showTitle === type.title"
             :setting="type"
+            :keyword="keyword"
             v-for="(type, key) in types"
             :key="key"
             @showcontent="handleChange(type)"
@@ -74,7 +75,8 @@ export default {
       showTab: 'module',
       keyword: '',
       ismobile: browser.mobile,
-      showTitle: ''
+      showTitle: '',
+      clickItem: false
     }
   },
   methods: {
@@ -87,13 +89,13 @@ export default {
       } else {
         this.$router.push({
           name: 'list',
-          params: this.showTab === 'type' ? {title: '全部', type: type.title} : {title: type.title, type: '全部'}
+          params: this.showTab === 'type' ? {type: type.title} : {title: type.title}
         })
       }
     },
     checkHandle (type, item) {
       let route = this.$route
-      if (route.name === 'map' || route.name === 'info') {
+      if (route.name === 'map' || route.name === 'info' || route.name === 'home') {
         this.$router.push({name: 'info',
           params: {
             title: type.title,
@@ -101,6 +103,8 @@ export default {
           }
         })
       } else {
+        this.clickItem = !this.clickItem
+        this.$bus.$emit('itemclick', this.clickItem)
         this.$router.push({
           name: 'item',
           params: this.showTab === 'type' ? {title: '全部', type: type.title, show: item.name} : {title: type.title, type: '全部', show: item.name}
@@ -111,20 +115,33 @@ export default {
   watch: {
     '$route': {
       deep: true,
-      immediate: true,
+      immediate: false,
       handler (newVal) {
         setTimeout(() => {
-          this.showTitle = newVal.params.title
-          if (this.showTitle !== '全部') {
-            if (this.types.find(item => item.title === this.showTitle)) {
-              this.showTab = 'type'
-            } else {
-              this.showTab = 'module'
-            }
+          if (newVal.name === 'map' || newVal.name === 'info' || newVal.name === 'home') {
+            this.showTitle = newVal.params.title
+          } else {
+            this.showTitle = this.showTab === 'type' ? newVal.params.type : newVal.params.title
           }
+          // if (this.types.find(item => item.title === this.showTitle)) {
+          //   this.showTab = 'type'
+          // } else {
+          //   this.showTab = 'module'
+          // }
         })
       }
+    },
+    showTab (newVal) {
+      if (!this.keyword) {
+        this.$bus.$emit('closeitem', false)
+      }
+      this.showTitle = newVal === 'type' ? this.$route.params.type : this.$route.params.title
     }
+  },
+  mounted () {
+    this.$bus.$on('showaside', data => {
+      this.show = data
+    })
   }
 }
 </script>

+ 7 - 1
src/pages/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class='layout-con'>
+  <div class='layout-con' :style="{background: `#fff url(${bg}) center center`}">
     <router-view :showside='isSide' @sidestatus='getSideStatus'></router-view>
     <Aside />
   </div>
@@ -18,6 +18,12 @@ export default {
       isSide: true
     }
   },
+  computed: {
+    bg () {
+      let bg = this.$isLocal ? require('@/assets/images/bg.jpg') : 'http://4d-tjw.oss-cn-shenzhen.aliyuncs.com/images/bg.jpg'
+      return bg
+    }
+  },
   methods: {
     getSideStatus (data) {
       this.isShow = data

+ 242 - 74
src/pages/list/index.vue

@@ -1,74 +1,153 @@
 <!--  -->
 <template>
-<div class='layout' @touchmove.prevent>
-  <div class="nav-top">
-    <div class="nav-name">
-      <router-link :to="{name:'map',params:{title:$route.params.title}}" class="go-map" >
-        <i class="iconfont icon-left"></i><span>地图模式</span>
-      </router-link>
-      <div class="nav-tag"  v-if="currentArea.link">
-        <span class="fs">俯视整个{{currentArea.title}}</span>
-        <span @click="goto(currentArea)" class="hpsj">航拍视角</span>
+  <div class="layout" :style="{height:showList?'100%':'0',background:isWide?`#fff url(${bg}) top center`:''}">
+  <!-- background: #fff url('~@/assets/images/img_all_bg.jpg') top center; -->
+
+    <template v-if="!isWide">
+      <div class="mobile-icon">
+        <template v-if="currentArea && currentArea.link">
+          <span class="list-icon" @click="goto(currentArea)">
+            <i class="iconfont icon-leixing_hangpai"></i>航拍
+          </span>
+        </template>
+        <div
+            @click="tapMap()"
+            class="list-icon"
+          >
+          <i class="iconfont icon-tuceng"></i>地图
+        </div>
+      </div>
+    </template>
+    <div class="nav-top" v-if="isWide">
+      <div class="nav-name">
+        <div
+          v-if="!isLocal"
+          @click="tapMap()"
+          class="go-map"
+        >
+          <i class="iconfont icon-left"></i>
+          <span>地图模式</span>
+        </div>
+        <div class="nav-tag" v-if="currentArea.link">
+          <span class="fs">俯视整个{{currentArea.title}}</span>
+          <span @click="goto(currentArea)" class="hpsj">航拍视角</span>
+        </div>
+      </div>
+      <div class="area">
+        <span class="txt-bold">区域:</span>
+        <ul>
+          <li
+            :class="{active:item==$route.params.title}"
+            @click="$router.push({name: 'list', params: {title: item}})"
+            v-for="(item,i) in area"
+            :key="i"
+          >{{item}}</li>
+        </ul>
+      </div>
+      <div class="types">
+        <span class="txt-bold">类型:</span>
+        <ul>
+          <li
+            :class="{active:item==$route.params.type}"
+            @click="$router.push({name: 'list', params: {type: item}})"
+            v-for="(item,i) in types"
+            :key="i"
+          >{{item}}</li>
+        </ul>
       </div>
     </div>
-    <div class="area">
-      <span class="txt-bold">区域:</span>
-      <ul>
-        <li :class="{active:item==$route.params.title}" @click="$router.push({name: 'list', params: {title: item}})" v-for="(item,i) in area" :key="i">{{item}}</li>
-      </ul>
-    </div>
-    <div class="types">
-      <span class="txt-bold">类型:</span>
-       <ul>
-        <li :class="{active:item==$route.params.type}"  @click="$router.push({name: 'list', params: {type: item}})" v-for="(item,i) in types" :key="i">{{item}}</li>
-      </ul>
+    <div class="mobile-top" v-else>
+      <div class="mobile-area">
+        <div class="li-type">区域:</div>
+        <div class="li-ul" ref="ularea">
+          <ul>
+            <li
+              :class="{active:item==$route.params.title}"
+              @click="$router.push({name: 'list', params: {title: item}})"
+              v-for="(item,i) in area"
+              :key="i"
+              :ref="`areali${i}`"
+            >{{item}}</li>
+            <li class="tiancong"></li>
+          </ul>
+        </div>
+      </div>
+      <div class="mobile-types">
+        <div class="li-type">类型:</div>
+        <div class="li-ul" ref="ultype">
+          <ul>
+            <li
+              :class="{active:item==$route.params.type}"
+              @click="$router.push({name: 'list', params: {type: item}})"
+              v-for="(item,i) in types"
+              :ref="`typeli${i}`"
+              :key="i"
+            >{{item}}</li>
+            <li class="tiancong"></li>
+          </ul>
+        </div>
+      </div>
     </div>
-  </div>
-  <div class="list-body" >
-    <div class="list-con" ref="listcon" :style="{height: (wh.height - topCap)+ 'px'}">
-      <div @click="goto(item)" :class="{card:true,'card-animation':i===whichitem}" :ref="`list${i}`" v-for="(item, i) in list" :key="i">
-        <div class="card-img">
-          <img src="https://pro.modao.cc/uploads4/images/3099/30999897/v2_pnhd3s.jpg" alt="">
-          <div class="card-mask" v-if="!item.link&&!item.data">
-            <p>正在拍摄<br/>敬请期待</p>
-            <div class="show-type">
-              <i v-for="(iType,idxT) in item.showType" :key="idxT" class="iconfont" :class="'icon-'+iType"></i>
+    <div class="list-body" >
+      <div class="list-con" ref="listcon" :style="{height: (wh.height - topCap)+ 'px'}" >
+        <div
+          @click="goto(item)"
+          :class="{card:true,'card-animation':i===whichitem&&isWide}"
+          :ref="`list${i}`"
+          v-for="(item, i) in list"
+          :key="i"
+        >
+          <div class="card-img">
+            <img :src="item.coverImg|| defaultImg">
+            <div class="card-mask" v-if="!item.link&&!item.data">
+              <p>正在拍摄
+                <br>敬请期待
+              </p>
+            </div>
+            <div class="card-mask clear-mask" v-else>
+              <div class="show-type">
+                <i
+                  v-for="(iType,idxT) in item.showType"
+                  :key="idxT"
+                  class="iconfont"
+                  :class="'icon-'+iType"
+                ></i>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="card-txt">
-          <div class="title">
-            <i class="iconfont" :class="'icon-'+item.type"></i>
-            <span>{{item.name}}</span>
-          </div>
-          <div class="tag">
-            <span class="tag-span" v-for="(sub,idx) in item.tags" :key="idx">{{sub}}</span>
-          </div>
-          <div class="address">
-            <span>{{item.address}}</span>
+          <div class="card-txt">
+            <div class="title">
+              <i class="iconfont" :class="'icon-'+item.type"></i>
+              <span>{{item.name}}</span>
+            </div>
+            <div class="tag">
+              <span class="tag-span" v-for="(sub,idx) in item.tags" :key="idx">{{sub}}</span>
+            </div>
+            <div class="address">
+              <span>{{item.address}}</span>
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <imageQuery :introduce="introduce" :name="name" :showAside="true" :screens="screens" @exitHandle="screens = null"/>
   </div>
-  <imageQuery :screens="screens" @exitHandle="screens = null" />
-
-</div>
 </template>
 
 <script>
 // 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
 // 例如:import 《组件名称》 from '《组件路径》';
 import browser from '@/util/browser'
+
 import data from '@/data'
 import imageQuery from '@/pages/imageQuery'
 
-const wh = {width: window.innerWidth, height: window.innerHeight}
+const wh = { width: window.innerWidth, height: window.innerHeight }
 const fixScroll = 40
-const topCap = 168
+const topCap = wh.width > 1085 ? 208 : 168
 export default {
-// import引入的组件需要注入到对象中才能使用
-  components: {imageQuery},
+  // import引入的组件需要注入到对象中才能使用
+  components: { imageQuery },
   data () {
     // 这里存放数据
     return {
@@ -76,20 +155,39 @@ export default {
       wh,
       showAside: false,
       whichitem: '',
+      whichareali: '',
+      whichtypeli: '',
       list: [],
       fixScroll,
       topCap,
       currentArea: {},
-      screens: null
+      screens: null,
+      introduce: [],
+      name: '',
+      showList: false,
+      timeout: null
+
     }
   },
   // 监听属性 类似于data概念
   computed: {
+    isWide () {
+      return this.wh.width > 1085
+    },
+    bg () {
+      return this.$isLocal ? require('@/assets/images/img_all_bg.jpg') : `${data.cdnHref}img_all_bg.jpg`
+    },
+    defaultImg () {
+      return this.$isLocal ? require('@/assets/images/default.jpg') : `${data.cdnHref}default.jpg`
+    },
     area () {
       return data.modules.map(item => {
         return item.title
       })
     },
+    isLocal () {
+      return this.$isLocal
+    },
     types () {
       return data.types.map(item => {
         return item.title
@@ -98,6 +196,11 @@ export default {
   },
   // 监控data中的数据变化
   watch: {
+    showList (newVal) {
+      if (!this.ismobile) {
+        this.$bus.$emit('showaside', false)
+      }
+    },
     '$route.params.title': {
       deep: true,
       immediate: true,
@@ -106,13 +209,20 @@ export default {
           if (newVal !== oldVal) {
             let tempArr = data.modules.find(item => item.title === newVal)
             this.currentArea = tempArr
+
             let children = [...tempArr.children]
+
             if (tempArr && this.$route.params.type !== '全部') {
-              children = children.filter(item => item.tagType === this.$route.params.type)
+              children = children.filter(
+                item => item.tagType.name === this.$route.params.type
+              )
               this.list = children
             } else if (tempArr && this.$route.params.type === '全部') {
               this.list = children
             }
+            if (this.ismobile) {
+              this.paramsNavChange()
+            }
           }
         })
       }
@@ -123,14 +233,22 @@ export default {
       handler (newVal, oldVal) {
         setTimeout(() => {
           if (newVal !== oldVal) {
-            let tempArr = data.modules.find(item => item.title === this.$route.params.title)
+            let tempArr = data.modules.find(
+              item => item.title === this.$route.params.title
+            )
             let children = [...tempArr.children]
+
             if (tempArr && newVal !== '全部') {
-              children = children.filter(item => item.tagType === this.$route.params.type)
+              children = children.filter(
+                item => item.tagType.name === this.$route.params.type
+              )
               this.list = children
             } else if (tempArr && newVal === '全部') {
               this.list = children
             }
+            if (this.ismobile) {
+              this.paramsNavChange()
+            }
           }
         })
       }
@@ -139,48 +257,99 @@ export default {
       deep: true,
       immediate: true,
       handler (newVal, oldVal) {
-        setTimeout(() => {
-          if (newVal) {
-            this.list.find((item, i) => {
-              if (newVal === item.name) {
-                this.whichitem = i
-                let l = `list${this.whichitem}`
-                this.$refs.listcon.scrollTop = this.$refs[l][0].offsetTop - (fixScroll + topCap)
-              }
-            })
-          }
-        })
-        setTimeout(() => {
-          this.whichitem = ''
-        }, 1200)
+        this.paramsShowChange()
       }
     }
   },
   // 方法集合
   methods: {
+    tapMap () {
+      let route = this.$route
+      this.$router.push({
+        name: route.params.show ? 'info' : 'map',
+        params: {title: route.params.title, show: route.params.show}
+      })
+    },
+    paramsNavChange () {
+      let {type, title} = this.$route.params
+      if (type || title) {
+        this.area.find((item, i) => {
+          if (item === title) {
+            let areali = `areali${i}`
+            this.$refs.ularea.scrollLeft = this.$refs[areali] && this.$refs[areali][0].offsetLeft
+          }
+        })
+        this.types.find((item, i) => {
+          if (item === type) {
+            let typeli = `typeli${i}`
+            this.$refs.ultype.scrollLeft = this.$refs[typeli] && this.$refs[typeli][0].offsetLeft
+          }
+        })
+      }
+    },
+    paramsShowChange () {
+      setTimeout(() => {
+        let show = this.$route.params.show
+        if (show) {
+          this.list.find((item, i) => {
+            if (show === item.name) {
+              this.whichitem = i
+              let l = `list${i}`
+              this.$refs.listcon.scrollTop =
+              this.$refs[l] && this.$refs[l][0].offsetTop - ((this.isWide ? fixScroll : 0) + topCap)
+            }
+          })
+        }
+      })
+      if (this.isWide) {
+        if (this.timeout) {
+          clearTimeout(this.timeout)
+        }
+        this.timeout = setTimeout(() => {
+          this.whichitem = ''
+        }, 1000)
+      }
+    },
     goto (info) {
       if (info.link) {
+        let params = this.$route.params
+        let name = null
         let id = null
         Object.keys(data.data).forEach(key => {
           if (data.data[key] === info) {
             id = key
+            name = data.data[key].name
           }
         })
-        this.$router.push({name: 'external', params: {url: info.link, id: id}})
+        this.$router.push({
+          name: 'external',
+          params: { url: info.link, id: id },
+          query: {title: params.title, type: params.type, show: name}
+        })
       } else if (info.data) {
         this.screens = info.data
+        this.introduce = info.introduce
+        this.name = info.name
       }
     }
   },
   // 生命周期 - 创建完成(可以访问当前this实例)
-  created () {
-
-  },
+  created () {},
   // 生命周期 - 挂载完成(可以访问DOM元素)
   mounted () {
+    window.onresize = () => {
+      if (this.isWide) {
+        this.$router.go(0)
+      }
+    }
+    this.$bus.$on('itemclick', data => {
+      this.paramsShowChange()
+    })
+    setTimeout(() => {
+      this.showList = true
+    })
   },
-  beforeDestroy () {
-  },
+  beforeDestroy () {},
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -191,6 +360,5 @@ export default {
 </script>
 <style scoped>
 /* 引入公共css类 */
-@import './style.css';
-
+@import "./style.css";
 </style>

+ 141 - 26
src/pages/list/style.css

@@ -1,14 +1,14 @@
 .layout{
-  background: #f3f2f0;
-  transition: all ease 0.3s;
+  transition: all ease 0.8s;
   box-sizing: border-box;
   width: 100%;
-  height: 100%;
-  background: #fff url('~@/assets/images/bg.jpg') center center;
+  overflow: hidden;
+  -webkit-overflow-scrolling: touch;
 }
 
 .txt-bold{
   font-weight: bold;
+  width: 60px;
 }
 
 .clear{
@@ -17,44 +17,50 @@
 
 .nav-top{
   margin: 0 50px 20px;
-  padding-top: 20px;
+  padding-top: 60px;
+
 }
 .nav-top .nav-name .go-map{
   background: #fa3800;
   color: #fff;
   padding: 10px;
   border-radius: 4px;
-  margin-bottom: 30px;
   display: inline-block;
   cursor: pointer;
   text-decoration: none;
+  margin:0 15px 30px 0;
+  font-size: 14px;
 }
 .nav-top .nav-name .nav-tag{
   display: inline-block;
-  margin-left: 15px;
   font-size: 0;
-  cursor: pointer;
 }
 .nav-top .nav-name .fs{
   padding: 10px 10px 7px 10px;
-  box-shadow: 0 1px 0 #ccc;
-  font-size: 16px;
+  box-shadow:0 3px 8px rgba(0,0,0,0.1);
+  font-size: 14px;
+  cursor: default;
+  border-radius: 3px 0 0 3px;
+
 }
 .nav-top .nav-name .hpsj{
-  font-size: 16px;
+  cursor: pointer;
+  font-size: 14px;
   background: #fa3800;
   color: #fff;
   padding: 10px;
-  border-top-right-radius:4px;
-  border-bottom-right-radius:4px;
+  border-radius: 0 3px 3px 0;
   margin-bottom: 30px;
+  box-shadow:0 3px 8px rgba(0,0,0,0.1);
   display: inline-block;
 }
 .nav-top .go-map .iconfont{
   font-size: 14px;
 }
 .nav-top .area,.nav-top .types{
-  margin-bottom: 30px ;
+  margin-bottom: 20px ;
+  display: flex;
+  align-items: baseline;
 }
 
 .nav-top .area  ul,.nav-top .types ul{
@@ -90,7 +96,7 @@
   display: inline-block;
   width: 23%;
   box-sizing: border-box;
-  margin: 20px 1%;
+  margin: 30px 1% 0;
   background: #fff;
   border-radius: 4px;
   overflow: hidden;
@@ -102,10 +108,14 @@
 }
 .list-con .card:hover{
   animation: scaleFrames 0.5s 1;
+  animation-fill-mode: forwards;
 }
 
 .list-con .card .card-img{
   position: relative;
+  font-size: 0;
+  max-height: 240px;
+  overflow: hidden;
 }
 .list-con .card .card-img .card-mask{
   position: absolute;
@@ -115,6 +125,11 @@
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   color: #fff;
+  font-size: 16px;
+}
+
+.list-con .card .card-img .clear-mask{
+  background: none;
 }
 
 .list-con .card .card-img .card-mask p {
@@ -146,9 +161,6 @@
   padding: 0 10px;
 }
 
-
-
-
 .list-con .card .card-txt div{
   margin: 10px 0;
 }
@@ -171,7 +183,7 @@
 .list-con .card .card-txt .tag .tag-span{
   display: inline-block;
   color: #f13800;
-  border: 1px solid #f13800;
+  border: 1px solid #ff9d7f;
   padding: 2px 5px;
   margin-right: 10px;
   font-size: 12px;
@@ -181,6 +193,82 @@
   color: #2b2521;
 }
 
+.mobile-top{
+  overflow: hidden;
+  margin: 70px 10px 0;
+}
+.mobile-types,.mobile-area{
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: 10px 0; 
+}
+.mobile-types .li-type,.mobile-area .li-type{
+  position: absolute;
+  left: 0;
+  padding: 5px 0;
+  width: 50px;
+  display: inline-block;
+}
+.mobile-types .li-ul,.mobile-area .li-ul{
+  position: relative;
+  left: 50px;
+  white-space: nowrap;
+  overflow-x: scroll;
+}
+.mobile-types .li-ul li,.mobile-area .li-ul li{
+  padding: 5px 10px;
+  border-radius: 4px;
+  display: inline-block;
+  -webkit-tap-highlight-color:transparent;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+}
+
+.mobile-types .li-ul::-webkit-scrollbar, .mobile-area .li-ul::-webkit-scrollbar{
+  display: none;
+}
+
+.mobile-top .active{
+  background: #fa3800;
+  color: #fff;
+}
+
+.mobile-top .tiancong{
+  display: inline-block;
+  width: 40px;
+}
+
+.mobile-icon{
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  z-index: 99999;
+}
+
+.mobile-icon .list-icon{
+  padding: 5px 12px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.2);
+  text-align: center;
+  color: #2b2521;
+  font-size: 12px;
+  background-color: #fff;
+  width: 48px;
+  box-sizing: border-box;
+  margin-top: 10px;
+  text-decoration: none;
+  display: block;
+}
+
+
+.mobile-icon .list-icon i {
+  display: block;
+  color: #2b2521;
+  font-size: 24px;
+}
 
 /* 动画帧 */
 
@@ -189,14 +277,41 @@
   0% {
     transform: scale(1)
   }
-  
-  50% {
+
+  100% {
     transform: scale(1.05)
   }
-  75% {
-    transform: scale(1.05)
+}
+
+@media screen and (max-width: 1085px){
+  .list-body{
+    width: 100%;
   }
-  100% {
-    transform: scale(1)
+  .list-con{
+    padding: 10px 0;
+    box-sizing:inherit;
   }
-}
+
+  .list-con .card{
+    width: calc(100% - 20px);
+    margin: 10px;
+  }
+
+  .nav-top{
+    margin: 0 10px 20px;
+  }
+  .nav-name{
+    display: none;
+  }
+  .nav-top{
+    padding-top: 80px;
+  }
+  .list-con .card{
+    -webkit-tap-highlight-color:transparent;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+  .list-con .card:hover{
+    animation: none;
+    animation-fill-mode: none;
+  }
+}

+ 128 - 70
src/pages/map/index.vue

@@ -1,63 +1,60 @@
 <template>
-  <div class="layout" @touchmove.prevent>
-    <div id="map"></div>
-
-    <!-- <div class="dialog" v-show="showDialog">
-      <a class="close" @click="showDialog = false"></a>
-      <a class="jleft" @click="slideHandle(--imgIndex)">
-        <img src="@/assets/images/jiantou.png">
-      </a>
-      <a class="jright" @click="slideHandle(++imgIndex)">
-        <img src="@/assets/images/jiantou2.png">
-      </a>
-    </div> -->
-
-    <div class="map-bottom-layout" :class="{mobile: ismobile}">
-      <div class="map-tabs clear" :class="{mobile: ismobile}">
-        <a @click="tapList()"><i class="iconfont icon-suolve"></i></a>
-        <template v-if="dmodel && dmodel.link">
-            <template v-if="ismobile">
-            <span v-if="mapTab === 1" @click="goto(dmodel)">
-              <i class="iconfont icon-leixing_hangpai"></i>航拍
-            </span>
-            <span v-if="mapTab === 0" @click="mapTab = 1 && goto(dmodel)">
-              <i class="iconfont icon-tuceng"></i>平面
-            </span>
-          </template>
-          <template v-else>
-            <a :class="{active: mapTab === 1}" class="rad">
+<div class="layout" :style="{top:showList?'0':'100%'}" @touchmove.prevent>
+  <div id="map"></div>
+  <div class="map-bottom-layout" :class="{mobile: ismobile}">
+    <div class="map-tabs clear" :class="{mobile: ismobile}">
+      <template v-if="!isLocal && !ismobile">
+        <a class="rad list-pc-icon" @click="tapList()"><i class="iconfont icon-suolve"></i></a>
+      </template>
+      <template v-if="dmodel && dmodel.link">
+        <template v-if="ismobile">
+          <span v-if="mapTab === 1" @click="goto(dmodel)">
+            <i class="iconfont icon-leixing_hangpai"></i>航拍
+          </span>
+          <span v-if="mapTab === 0" @click="mapTab = 1 && goto(dmodel)">
+            <i class="iconfont icon-tuceng"></i>平面
+          </span>
+        </template>
+        <template v-if="!ismobile">
+          <a class="rad mar-left" >
               俯视整个{{$route.params.title}}
             </a>
-            <a @click="goto(dmodel)" :class="{active: mapTab === 0}" class="rad">
-              航拍视角
-            </a>
-          </template>
+          <a @click="goto(dmodel)" :class="{active: mapTab === 1}" class="rad mar-rigth">
+            航拍视角
+          </a>
         </template>
-      </div>
-
-      <div class="focus-info" v-if="info && ismobile">
-        <h3>{{info.name}}</h3>
-        <div class="tags">
-          <span>{{info.parent}}</span>
-        </div>
-        <div class="tags">
-          <span>{{info.tagType}}</span>
-        </div>
-        <p>{{info.address}}</p>
-        <div class="types">
-          <i v-for="type in info.showType" :key="type" class="iconfont" :class="'icon-'+type"></i>
+      </template>
+      <template v-if="!isLocal && ismobile">
+        <div class="list-icon" @click="tapList()">
+          <i class="iconfont icon-suolve"></i>列图
         </div>
-        <a @click="goto(info)" v-if="info.link || info.data">
+      </template>
+    </div>
+
+    <div class="focus-info" v-if="info && ismobile">
+      <h3>{{info.name}}</h3>
+      <div class="tags">
+        <span>{{info.parent}}</span>
+      </div>
+      <div class="tags">
+        <span>{{info.tagType.name}}</span>
+      </div>
+      <p>{{info.address}}</p>
+      <div class="types">
+        <i v-for="type in info.showType" :key="type" class="iconfont" :class="'icon-'+type"></i>
+      </div>
+      <a @click="goto(info)" v-if="info.link || info.data">
           <span>点击</span><span>参观</span>
         </a>
-        <a class="nolink" v-else>
+      <a class="nolink" v-else>
           <span>正在</span><span>拍摄</span>
         </a>
-      </div>
     </div>
+  </div>
+
+  <imageQuery :introduce="introduce" :name="name" :showAside="true" :screens="screens" @exitHandle="screens = null"/>
 
-    <imageQuery :screens="screens" @exitHandle="screens = null" />
-    <!-- <div class="image-dialog" v-if="screens">
+  <!-- <div class="image-dialog" v-if="screens">
       <a @click="screens = null"><i class="iconfont icon-left"></i>返回</a>
       <div class="image-layout">
         <Slide :screens="screens" :current="0">
@@ -67,7 +64,7 @@
         </Slide>
       </div>
     </div> -->
-  </div>
+</div>
 </template>
 
 <script>
@@ -77,7 +74,9 @@ import data from '@/data'
 const AMap = global.AMap
 
 export default {
-  components: { imageQuery },
+  components: {
+    imageQuery
+  },
   data () {
     return {
       cacheMakers: [],
@@ -88,7 +87,16 @@ export default {
       info: null,
       dmodel: {},
       isType: true,
-      screens: null
+      screens: null,
+      showList: false,
+      introduce: [],
+      name: ''
+
+    }
+  },
+  computed: {
+    isLocal () {
+      return this.$isLocal
     }
   },
   methods: {
@@ -113,10 +121,10 @@ export default {
             <span>${item.name}</span>
           </h3>
           <div class="content">
-            <div><span>${item.parent}</span><span>${item.tagType}</span></div>
+            <div><span>${item.parent}</span><span>${item.tagType.name}</span></div>
             <p>${item.address}</p>
             <div class="oper">
-              <div>${types.join('')}</div>
+              <div>${(item.link || item.data) ? types.join('') : ''}</div>
               <a class='query-image'>${(item.link || item.data) ? '点击参观' : '正在拍摄'}</a>
             </div>
           </div>
@@ -209,10 +217,21 @@ export default {
 
       global.AMap.event.addListener(marker, 'click', e => {
         if (!show) {
-          this.$router.push({name: 'info', params: {title: this.$route.params.title, show: item.name}})
+          this.$router.push({
+            name: 'info',
+            params: {
+              title: this.$route.params.title,
+              show: item.name
+            }
+          })
           // marker.seftadditional.play()
         } else {
-          this.$router.push({name: 'map', params: {title: this.$route.params.title}})
+          this.$router.push({
+            name: 'map',
+            params: {
+              title: this.$route.params.title
+            }
+          })
           // marker.seftadditional.pause()
         }
       })
@@ -223,7 +242,12 @@ export default {
           content: infoDom
         })
         infoDom.querySelector('h3').addEventListener('click', () => {
-          this.$router.push({name: 'map', params: {title: this.$route.params.title}})
+          this.$router.push({
+            name: 'map',
+            params: {
+              title: this.$route.params.title
+            }
+          })
           // marker.seftadditional.pause()
         })
         infoDom.querySelector('a').addEventListener('click', clickHandle)
@@ -240,17 +264,35 @@ export default {
       this.loadding(item, params.show)
     },
     tapList () {
-      let params = this.$route.params
-      let items, item
-      let tagType
-      if (params.show) {
-        items = data.modules.find(item => item.title === params.title)
-        item = items ? items.children.find(item => item.name === params.show) : ''
-        tagType = item.tagType
-      }
+      let {params} = this.$route
+      // let items, item
+      // let tagType
+
+      // if (params.show) {
+      //   if (data.types.find(item => item.title === params.title)) {
+      //     items = data.types.find(item => item.title === params.title)
+      //   } else {
+      //     items = data.modules.find(item => item.title === params.title)
+      //   }
+      //   if (name === 'map' || name === 'info' || name === 'home') {
+
+      //   }
+      //   item = items ? items.children.find(item => item.name === params.show) : ''
+
+      //   tagType = item.tagType.name
+      // }
+
       this.$router.push({
         name: params.show ? 'item' : 'list',
-        params: !this.isType ? {title: params.title, type: tagType || '全部', show: params.show} : {title: '全部', type: params.title, show: params.show}
+        params: !this.isType ? {
+          title: params.title,
+          type: '全部',
+          show: params.show
+        } : {
+          title: '全部',
+          type: params.title,
+          show: params.show
+        }
       })
     },
     goto (info) {
@@ -261,13 +303,23 @@ export default {
             id = key
           }
         })
-        this.$router.push({name: 'external', params: {url: info.link, id: id}})
+        this.$router.push({
+          name: 'external',
+          params: {
+            url: info.link,
+            id: id
+          }
+        })
       } else if (info.data) {
         this.screens = info.data
+        this.introduce = info.introduce
+        this.name = info.name
       }
     },
     queryImage (item) {
       this.screens = item.data
+      this.introduce = item.introduce
+      this.name = item.name
     }
   },
   watch: {
@@ -278,6 +330,11 @@ export default {
         this.map.add(this.satellite)
       }
     },
+    showList () {
+      if (!this.ismobile) {
+        this.$bus.$emit('showaside', true)
+      }
+    },
     '$route.params.title': {
       handler: function (newVal, oldVal) {
         setTimeout(() => {
@@ -302,6 +359,9 @@ export default {
     }
   },
   mounted () {
+    setTimeout(() => {
+      this.showList = true
+    })
     this.map = new global.AMap.Map('map', {
       mapStyle: 'amap://styles/fresh',
       zoom: 18,
@@ -315,8 +375,6 @@ export default {
 
 <style scoped>
 @import url(./style);
-</style>
-
-<style>
+</style><style>
 @import url(./map_style);
 </style>

+ 36 - 2
src/pages/map/style.css

@@ -1,7 +1,9 @@
 
 .layout, #map {
   width: 100%;
-  height: 100%
+  height: 100%;
+  transition: ease 0.8s all;
+  position: relative;
 }
 
 .maker-info {
@@ -239,12 +241,24 @@
   background-color: #ffffff;
   color: #2b2521;
 }
+.map-tabs .mar-left{
+  margin-left: 15px;
+  cursor: default;
+  border-radius: 3px 0 0 3px;
+}
+
+.map-tabs .mar-rigth{
+  border-radius: 0 3px 3px 0;
+}
+.map-tabs .list-pc-icon{
+  padding: 0 10px;
+}
 
 
 .map-tabs a.active {
   background-color: #fa3800;
   color: #fff;
-  margin-left: 15px;
+  /* margin-left: 15px; */
 }
 
 
@@ -261,6 +275,7 @@
   color: #2b2521;
   font-size: 12px;
   background-color: #fff;
+  margin-bottom: 10px;
 }
 
 .map-tabs span i {
@@ -270,6 +285,25 @@
 
 }
 
+.map-tabs .list-icon {
+  padding: 5px 12px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.2);
+  text-align: center;
+  color: #2b2521;
+  font-size: 12px;
+  background-color: #fff;
+  width: 48px;
+  box-sizing: border-box;
+}
+
+.map-tabs .list-icon i {
+  display: block;
+  color: #2b2521;
+  font-size: 24px;
+
+}
+
 .focus-info {
   z-index: 10;
   background-color: #fff;

+ 25 - 5
src/pages/search/index.vue

@@ -7,19 +7,18 @@
     </div>
 
     <ul class="list">
-      <li v-for="item in listData" :key="item.name">
+      <li  @click="tapSearch(item)" v-for="(item, i) in listData" :key="i">
         <svg class="icon" aria-hidden="true">
           <use :xlink:href="'#icon-'+item.type"></use>
         </svg>
         <div class="info">
           <h3>{{item.name}}</h3>
           <div>
-            <span v-for="tag in item.tags" :key="tag">{{tag}}</span>
+            <span v-for="(tag, idx) in item.tags" :key="idx">{{tag}}</span>
           </div>
         </div>
-        <a @click="$router.push({name: 'info', params: {title: item.title, show: item.name}})">
+        <a>
           <span><i class="iconfont icon-jiantou"></i></span>
-          看位置
         </a>
       </li>
     </ul>
@@ -38,16 +37,37 @@ export default {
   computed: {
     listData () {
       let list = []
+
       data.modules.forEach(m => {
+        if (m.title === '全部') {
+          return
+        }
         m.children.forEach(item => {
           if (~item.name.indexOf(this.keyword)) {
             list.push({...item, title: m.title})
           }
         })
       })
-      console.log(list)
       return list
     }
+  },
+  methods: {
+    tapSearch (item) {
+      let {type} = this.$route.query
+      if (type === 'map' || type === 'info' || type === 'home') {
+        this.$router.push({name: 'info',
+          params: {
+            title: item.title,
+            show: item.name
+          }
+        })
+      } else {
+        this.$router.push({
+          name: 'item',
+          params: type === 'type' ? {title: '全部', type: item.title, show: item.name} : {title: item.title, type: '全部', show: item.name}
+        })
+      }
+    }
   }
 }
 </script>

+ 48 - 40
src/router/index.js

@@ -9,47 +9,55 @@ import External from '@/pages/External'
 
 Vue.use(Router)
 
+// let isLocal = process.env.isLocal
+let isLocal = Vue.$isLocal
+
+let routes = [
+  {
+    path: '/',
+    name: 'mainLayout',
+    component: Layout,
+    children: [
+      {
+        path: '/',
+        name: 'home',
+        component: Home
+      },
+      {
+        path: '/list/:title/:type',
+        name: 'list',
+        component: List,
+        children: [
+          {name: 'item', path: ':show'}
+        ]
+      }
+    ]
+  },
+  {
+    path: '/search',
+    name: 'search',
+    component: Search
+  },
+  {
+    path: '/external/:url/:id',
+    name: 'external',
+    component: External
+  }
+]
+
+isLocal || routes[0].children.push(
+  {
+    path: '/map/:title',
+    name: 'map',
+    component: Map,
+    children: [
+      {name: 'info', path: ':show'}
+    ]
+  }
+)
+
 const router = new Router({
-  routes: [
-    {
-      path: '/',
-      name: 'mainLayout',
-      component: Layout,
-      children: [
-        {
-          path: '/',
-          name: 'home',
-          component: Home
-        },
-        {
-          path: '/list/:title/:type',
-          name: 'list',
-          component: List,
-          children: [
-            {name: 'item', path: ':show'}
-          ]
-        },
-        {
-          path: '/map/:title',
-          name: 'map',
-          component: Map,
-          children: [
-            {name: 'info', path: ':show'}
-          ]
-        }
-      ]
-    },
-    {
-      path: '/search',
-      name: 'search',
-      component: Search
-    },
-    {
-      path: '/external/:url/:id',
-      name: 'external',
-      component: External
-    }
-  ],
+  routes,
   scrollBehavior (to, from, savedPosition) {
     if (to.hash === '') {
       return { x: 0, y: 0 }