231 lines
9.8 KiB
HTML
Executable File
231 lines
9.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
|
|
<title>场馆导航</title>
|
|
<link rel="stylesheet" href="css/reset.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src="js/rem.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<img src="images/background.png" alt="" class="background">
|
|
<div class="top">
|
|
<div class="top-left" v-cloak>
|
|
<div class="left-box" style="height: 100%;overflow-y: scroll">
|
|
<div class="left-text">
|
|
<h3>{{venueInfo.venueName}}</h3>
|
|
<div class="venue-intro-text">
|
|
<img :src="url + sourcePath + venueInfo.venuePhoto" alt="" v-if="venueInfo.venuePhoto">
|
|
</div>
|
|
<div class="temperature">21℃</div>
|
|
</div>
|
|
<div class="time">{{time}}</div>
|
|
<div class="date">{{date}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="top-right">
|
|
<div class="main-title">
|
|
<p class="p-text">ནང་ཁུལ་གྱི་ཕྱོགས་སྟོན།</p>
|
|
<span>场馆导航</span>
|
|
</div>
|
|
<div class="main venue-main">
|
|
<div class="floor-btn">
|
|
<ul v-cloak>
|
|
<li v-for="btn in floorList">{{btn.venueName}}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="floor-img" id="images" v-cloak>
|
|
<div v-for="floor in floorList" class="floor-img-box" v-if="floorList && floorList.length > 0">
|
|
<img :src="url + sourcePath + floor.venuePhoto" alt="" style="width: 100%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<ul v-cloak>
|
|
<li class="active">
|
|
<a href="venue-guide.html">
|
|
<p class="p-text">ནང་ཁུལ་གྱི་ཕྱོགས་སྟོན།</p>
|
|
场馆导航
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="venue-intro.html">
|
|
<p class="p-text">ནང་ཁུལ་གྱི་ངོ་སྤྲོད།</p>
|
|
场馆介绍
|
|
</a>
|
|
</li>
|
|
<li v-for="(menu,idx) in menuList" :class="{active: tab == idx}" @click="goPage(idx, menu.categoryShowType, menu.categoryOpenUrl)">
|
|
<a href="javascript: void(0);">
|
|
<p class="p-text">{{menu.categoryRename}}</p>
|
|
{{menu.title}}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="contact.html">
|
|
<p class="p-text">ང་ཚོར་འབྲེལ་བ་གནང་ཐབས།</p>
|
|
联系我们
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div style="display: none">
|
|
<img src="" alt="" id="image">
|
|
</div>
|
|
<div class="iframe-container" v-if="showIframe">
|
|
<div class="iframe-box">
|
|
<img src="images/close.png" alt="" @click="showIframe = false">
|
|
<iframe :src="iframeUrl" frameborder="0" class="iframe"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="js/jquery-2.1.4.min.js"></script>
|
|
<script src="js/vue.js"></script>
|
|
<script src="js/nicescroll.js"></script>
|
|
<script src="js/ajax.js"></script>
|
|
<script>
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
date: '2020-01-01',
|
|
time: '00:00:00',
|
|
url: '',
|
|
sourcePath: '/route/file/download/false/',
|
|
menuList: [],
|
|
floorList: [],
|
|
temperature: '',
|
|
venueInfo: {},
|
|
tab: '*',
|
|
deviceCode: '',
|
|
iframeUrl: '',
|
|
showIframe: false
|
|
},
|
|
methods: {
|
|
// 获取日期、时间
|
|
initDate: function () {
|
|
var date = new Date()
|
|
var year = date.getFullYear()
|
|
var month = date.getMonth() + 1
|
|
var day = date.getDate()
|
|
var hour = date.getHours()
|
|
var mint = date.getMinutes()
|
|
var second = date.getSeconds()
|
|
if (month < 10) {
|
|
month = '0' + month
|
|
}
|
|
if (day < 10) {
|
|
day = '0' + day
|
|
}
|
|
if (hour < 10) {
|
|
hour = '0' + hour
|
|
}
|
|
if (mint < 10) {
|
|
mint = '0' + mint
|
|
}
|
|
if (second < 10) {
|
|
second = '0' + second
|
|
}
|
|
this.date = year + '年' + month + '月' + day + '日'
|
|
this.time = hour + ':' + mint + ':' + second
|
|
},
|
|
// 获取底部导航
|
|
getMenu: function () {
|
|
var self = this
|
|
doGetForm(self.url + '/app/showarticlecategory/listarticlecategoryrelease', {
|
|
deviceCode: self.deviceCode
|
|
}, null, function (code, data) {
|
|
self.saveBottomMenu(code, data)
|
|
})
|
|
},
|
|
saveBottomMenu: function (code, data) {
|
|
if (code == 200) {
|
|
var arr = []
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (data[i].categorySwitch == '1') {
|
|
arr.push(data[i])
|
|
}
|
|
}
|
|
this.menuList = arr
|
|
}
|
|
},
|
|
// 获取场馆导航场馆ID
|
|
getVenueGuideId: function () {
|
|
var self = this
|
|
doGetForm(self.url + '/app/showvenue/getshowvenuebydevicecoderelease/' + self.deviceCode, {}, null, function (code, data) {
|
|
self.saveVenueGuideId(code, data)
|
|
})
|
|
},
|
|
saveVenueGuideId: function (code, data) {
|
|
if (code == 200) {
|
|
this.venueInfo = data
|
|
this.getVenueGuide(data.showVenueId)
|
|
this.$nextTick(function () {
|
|
$('.left-box').niceScroll({
|
|
zindex: 2000
|
|
})
|
|
})
|
|
}
|
|
},
|
|
// 获取场馆导航showVenueId
|
|
getVenueGuide: function (id) {
|
|
var self = this
|
|
doGetForm(self.url + '/app/showvenue/listshowvenuerelease/' + id, {}, null, function (code, data) {
|
|
self.saveVenueGuide(code, data)
|
|
})
|
|
},
|
|
saveVenueGuide: function (code, data) {
|
|
var self = this
|
|
if (code == 200) {
|
|
self.floorList = data
|
|
setTimeout(function () {
|
|
$('.floor-btn ul li:first-child').addClass('active')
|
|
var cur = 0
|
|
$('.floor-btn ul li').click(function () {
|
|
$(this).addClass('active').siblings('li').removeClass('active')
|
|
cur += $('.floor-img-box').eq($(this).index()).position().top
|
|
$(".venue-main").animate({
|
|
"scrollTop": cur
|
|
},500);
|
|
})
|
|
}, 50)
|
|
}
|
|
},
|
|
// 跳转页面
|
|
goPage: function (idx, type, url) {
|
|
if (type == '99cadd0d-4ec7-4525-bfa4-e6535213792f') {
|
|
window.location.href = 'list.html?idx=' + idx
|
|
} else if (type == 'd5ce325d-d7b4-47fd-b258-48b56153c397') {
|
|
window.location.href = 'detail.html?idx=' + idx
|
|
} else if (type == '9d2efb79-3213-4558-983c-14188a3fbf24') {
|
|
window.location.href = 'img-list.html?idx=' + idx
|
|
} else {
|
|
// window.location.href = url
|
|
this.showIframe = true
|
|
this.iframeUrl = url
|
|
}
|
|
}
|
|
},
|
|
mounted: function () {
|
|
var self = this
|
|
<!-- self.url= 'https://www.xzszwhy.cn/show';-->
|
|
<!-- self.deviceCode='RKZ01H11';-->
|
|
self.url = localStorage.getItem('url')
|
|
self.deviceCode = localStorage.getItem('deviceCode')
|
|
setInterval(function () {
|
|
self.initDate()
|
|
}, 1000)
|
|
self.getMenu()
|
|
self.getVenueGuideId()
|
|
|
|
// $('.floor-img').niceScroll({
|
|
// zindex: 2000
|
|
// })
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|