|
@@ -2,17 +2,17 @@
|
|
|
<div class="iframe-layout" :class="{mobile: ismobile}">
|
|
|
<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&&imgs.length>0" :class="{active: !big}">相册</a>
|
|
|
+ <a @click="exitHandle" class="xiangce" v-if="key" :class="{active: big}">{{isHangpai?'航拍':'大场景'}}</a>
|
|
|
+ <a @click="xiangceHandle" class="xiangce" v-if="key&&imgs" :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 v-if="imgs.length>0" value="xiangce">相册</option>
|
|
|
+ <option value="big">{{isHangpai?'航拍':'大场景'}}</option>
|
|
|
+ <option v-if="imgs" value="xiangce">相册</option>
|
|
|
</select>
|
|
|
- <div class="r-aside" :class="{'show':show}" @click.stop>
|
|
|
+ <div v-if="introduce" 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>
|
|
@@ -28,13 +28,13 @@
|
|
|
|
|
|
<div class="asjdfioasfhuioasfh" v-else>
|
|
|
<div class="image-layout">
|
|
|
- <Slide :screens="screens" :current="0">
|
|
|
+ <Slide :screens="screensa" :current="0">
|
|
|
<i class="iconfont icon-left" slot="up"></i>
|
|
|
- <div slot="item" slot-scope="{data}" class="image-item" :style="{background:`url(${data}) no-repeat center center`,backgroundSize:'contain'}" @click.stop></div>
|
|
|
+ <div slot="item" slot-scope="{data}" class="image-item" :style="{background:`url(${data.img}) no-repeat center center`,backgroundSize:`${data.size}`}" @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="image-introduce" v-if="introduce">
|
|
|
<div class="intro-title">{{name}}</div>
|
|
|
<div class="intro-detail">
|
|
|
<p v-for="(item,i) in introduce" :key="i">{{item}}</p>
|
|
@@ -51,6 +51,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import Vue from 'vue'
|
|
|
import data from '@/data.js'
|
|
|
import imageQuery from '@/pages/imageQuery'
|
|
|
import browser from '@/util/browser'
|
|
@@ -71,25 +72,58 @@ export default {
|
|
|
big: true,
|
|
|
show: false,
|
|
|
ismobile: browser.mobile,
|
|
|
- screens: null
|
|
|
+ screens: null,
|
|
|
+ screensa: []
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
url () {
|
|
|
return this.$route.params.url
|
|
|
},
|
|
|
+ isHangpai () {
|
|
|
+ let id = this.key
|
|
|
+ let isTrue = id && data.data[id].showType.find((item) => {
|
|
|
+ return item === 'leixing_hangpai'
|
|
|
+ })
|
|
|
+ return isTrue
|
|
|
+ },
|
|
|
imgs () {
|
|
|
- let id = Object.keys(data.data).find(key => this.$route.params.id === key)
|
|
|
-
|
|
|
- return data.data[id].data || []
|
|
|
+ let id = this.key
|
|
|
+ return id ? data.data[id].data : null
|
|
|
},
|
|
|
name () {
|
|
|
- let id = Object.keys(data.data).find(key => this.$route.params.id === key)
|
|
|
- return data.data[id].name || ''
|
|
|
+ let id = this.key
|
|
|
+ return id ? data.data[id].name : null
|
|
|
},
|
|
|
introduce () {
|
|
|
- let id = Object.keys(data.data).find(key => this.$route.params.id === key)
|
|
|
- return data.data[id].introduce || []
|
|
|
+ let id = this.key
|
|
|
+ return id ? data.data[id].introduce : null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ screens () {
|
|
|
+ let arr = this.screens && this.screens.map((info, i) => {
|
|
|
+ let item = {}
|
|
|
+ var img = new Image()
|
|
|
+ var handle = () => {
|
|
|
+ if (img.width > img.height) {
|
|
|
+ item.size = '100% auto'
|
|
|
+ } else {
|
|
|
+ item.size = 'auto 100%'
|
|
|
+ }
|
|
|
+ this.screensa && Vue.set(this.screensa, i, item)
|
|
|
+ }
|
|
|
+ item.img = info
|
|
|
+ img.src = info
|
|
|
+
|
|
|
+ if (img.complete) {
|
|
|
+ handle()
|
|
|
+ } else {
|
|
|
+ img.onload = handle
|
|
|
+ }
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ this.screensa = arr
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -184,7 +218,7 @@ export default {
|
|
|
|
|
|
.asjdfioasfhuioasfh {
|
|
|
height: 100%;
|
|
|
- background-color: #000;
|
|
|
+ background-color: rgba(0, 0, 0, 0.8)
|
|
|
}
|
|
|
|
|
|
.iframe-layout a i {
|
|
@@ -273,7 +307,7 @@ export default {
|
|
|
padding-left: 20px;
|
|
|
padding-right: 20px;
|
|
|
position: absolute;
|
|
|
- top: 50%;
|
|
|
+ top: calc(50% + 15px);
|
|
|
left: 50%;
|
|
|
transform: translateY(-50%) translateX(-50%);
|
|
|
}
|
|
@@ -344,17 +378,18 @@ export default {
|
|
|
color:#fff;
|
|
|
padding:20px 10px;
|
|
|
line-height:1.5;
|
|
|
-
|
|
|
}
|
|
|
.image-introduce .intro-title{
|
|
|
font-size:18px;
|
|
|
font-weight:bold;
|
|
|
margin-bottom:20px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
.image-introduce .intro-detail{
|
|
|
- height: 150px;
|
|
|
+ height: 32vh;
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
}
|
|
|
.image-introduce .intro-detail p{
|
|
|
text-indent:32px;
|
|
@@ -363,4 +398,5 @@ export default {
|
|
|
.asjdfioasfhuioasfh >>> .ctrl{
|
|
|
top:25%;
|
|
|
}
|
|
|
+
|
|
|
</style>
|