|
@@ -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>
|