Skip to content

shuzilixiangwaibao / wanda-vr

Go to a project
Commit 45d2ca3a by junxiang wang
Options

后台发布版本2020-09-02 21:51

parent f37a73cc
Showing with 250 additions and 85 deletions
device.html
<!DOCTYPE html>
<html>
<head>
<title>玩转丹寨万达小镇</title>
<title>度假到丹寨</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="/libs/rem.js"></script>
<style>
*{
margin: 0;
......
index.html
<!DOCTYPE html>
<html>
<head>
<title>玩转丹寨万达小镇</title>
<title>度假到丹寨</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
......
libs/rem.js 0 → 100644
!function(n){
var e=n.document,
t=e.documentElement,
i=750,
d=i/100,
o="orientationchange"in n?"orientationchange":"resize",
a=function(){
var n=t.clientWidth||320;n>750&&(n=750);
t.style.fontSize=n/d+"px"
};
e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);
route.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<title>度假到丹寨</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="/libs/rem.js"></script>
<style>
*{
margin: 0;
padding: 0;
border:none;
}
.full-img{
width: 100%;
vertical-align: top;
}
</style>
<!-- <script src="/libs/vue/vue.js"></script>-->
</head>
<body id="app">
<img class="full-img" src="/images/route.png" />
<script>
</script>
</body>
</html>
show.html
......@@ -7,6 +7,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="/libs/rem.js"></script>
<style>
*{
margin: 0;
......@@ -21,39 +22,43 @@
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom: 70px;
padding-bottom: 0.7rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.nav-list{
margin-top: 20px;
margin-top: 0.35rem;
width: 100%;
white-space: nowrap;
height: 102px;
height: 1.85rem;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.nav-list::-webkit-scrollbar{
display: none;
}
.nav-item{
display: inline-block;
width: 57px;
height: 102px;
margin-left: 22px;
border-radius: 6px;
width: 1.04rem;
height: 1.85rem;
margin-left: 0.42rem;
border-radius: 0.1rem;
overflow: hidden;
}
.nav-item:last-child{
margin-right: 22px;
margin-right: 0.42rem;
}
.nav-item.active{
background: rgba(23, 40, 63, 0.3);
}
.nav-item__iconbox{
margin: 4px 1px 6px;
width: 55px;
height: 55px;
border-radius: 50px;
margin: 0.07rem 0.02rem auto;
width: 1rem;
height: 1rem;
border-radius: 50%;
overflow: hidden;
background: rgba(255,255,255,.2);
position: relative;
......@@ -71,46 +76,47 @@
}
.nav-item__mtitle{
text-align: center;
font-size: 14px;
line-height: 16px;
font-size: 0.26rem;
line-height: 0.28rem;
color: #fff;
}
.mtitle{
margin-top: 32px;
margin-top: 0.57rem;
color: #fff;
font-size: 40px;
font-size: 0.72rem;
text-align: center;
position: relative;
}
.mtitle__icon{
position: absolute;
right: 24px;
right: 0.43rem;
top: 50%;
transform: translateY(-50%);
width: 33px;
height: 33px;
width: 0.6rem;
height: 0.6rem;
}
.thumb{
padding: 25px 0 30px;
text-align: center;
}
.thumb__img{
width: 90%;
width: 6.68rem;
height: 4.46rem;
}
.content{
width: 90%;
width: 6.47rem;
margin: 0 auto;
flex:1;
overflow-y: scroll;
}
.content__text{
font-size: 17px;
font-size: 0.3rem;
color: #fff;
line-height: 30px;
line-height: 0.55rem;
}
.bottom{
height: 70px;
height: 0.7rem;
position: fixed;
left: 0;
bottom:0;
......@@ -121,11 +127,63 @@
background-position: bottom center;
}
.bottom__icon{
width: 35px;
height: 35px;
width: 0.63rem;
height: 0.63rem;
position: absolute;
right: 0.41rem;
bottom:0.51rem;
}
.modal-wrap{
background: rgba(0,0,0,.7);
position: fixed;
z-index: 3;
width: 100%;
height: 100%;
}
.modal-container{
}
.poster{
width: 6.51rem;
height: 10.65rem;
position: relative;
margin: 0.56rem auto 0.25rem;
}
.poster-img{
width: 100%;
height: 100%;
}
.change-poster-btn{
position: absolute;
right: 22px;
bottom:28px;
right: -0.25rem;
top: -0.32rem;
width: 2.07rem;
height: 0.66rem;
background: #FFFFFF;
font-size: 0.3rem;
font-weight: 400;
color: #333333;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
}
.poster-action-box{
width: 6.51rem;
margin: 0 auto;
display: flex;
justify-content:space-between;
align-items: center;
}
.poster-action-btn{
width: 2.07rem;
height: 0.66rem;
background: #FFFFFF;
font-size: 0.3rem;
font-weight: 400;
color: #333333;
line-height: 0.66rem;
border-radius: 0.33rem;
text-align: center;
}
</style>
<script src="/libs/vue/vue.js"></script>
......@@ -151,7 +209,19 @@
<div class="content__text" v-html="navs[activeIdx].content"></div>
</div>
<div class="bottom">
<img class="bottom__icon" src="/images/show/share.png" />
<img @click="bindShareEvent" class="bottom__icon" src="/images/show/share.png" />
</div>
<div class="modal-wrap" v-if="showPoster" @click="closeModal">
<div class="modal-container">
<div class="poster">
<img :src="posterUrl" class="poster-img" />
<div class="change-poster-btn">换一换</div>
</div>
<div class="poster-action-box">
<div class="poster-action-btn">保存图片</div>
<div class="poster-action-btn">分享好友</div>
</div>
</div>
</div>
</div>
<script>
......@@ -159,20 +229,42 @@ var vueInstance = new Vue({
el:'#app',
data(){
return {
showPoster:false,
activeIdx:0,
posterUrl:'',
navs:[
{mtitle:'高要<br\/>梯田',icon:'/images/show/nav-item-1.png',title:'高要梯田',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'扶贫茶园是在丹寨县委县政府的支持下，由丹寨万达小镇推出的新型扶贫公益项目，通过扶贫茶园认领的方式打造丹寨高品质茶叶品牌“丹红”“丹绿”，整合丹寨茶产业链、打造丹寨茶产业平台。游客来这里可采茶、制茶、吃茶餐、做研学。'},
{mtitle:'排廷<br\/>瀑布',icon:'/images/show/nav-item-2.png',title:'排廷瀑布',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'排廷瀑布'},
{mtitle:'石桥村<br\/>&nbsp;',icon:'/images/show/nav-item-3.png',title:'石桥村',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'石桥村'},
{mtitle:'金汞矿<br\/>遗址',icon:'/images/show/nav-item-4.png',title:'金汞矿遗址',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'金汞矿遗址'},
{mtitle:'扶贫<br/>茶园',icon:'/images/show/nav-item-5.png',title:'扶贫茶园',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'扶贫茶园'}
{id:1,poster:'https://cdnly.itour.fun/50/6b0df48558fdab00efbd3ae58f0abe.png',mtitle:'高要<br\/>梯田',icon:'/images/show/nav-item-1.png',title:'高要梯田',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'扶贫茶园是在丹寨县委县政府的支持下，由丹寨万达小镇推出的新型扶贫公益项目，通过扶贫茶园认领的方式打造丹寨高品质茶叶品牌“丹红”“丹绿”，整合丹寨茶产业链、打造丹寨茶产业平台。游客来这里可采茶、制茶、吃茶餐、做研学。'},
{id:1,poster:'https://cdnly.itour.fun/50/6b0df48558fdab00efbd3ae58f0abe.png',mtitle:'排廷<br\/>瀑布',icon:'/images/show/nav-item-2.png',title:'排廷瀑布',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'排廷瀑布'},
{id:1,poster:'https://cdnly.itour.fun/50/6b0df48558fdab00efbd3ae58f0abe.png',mtitle:'石桥村<br\/>&nbsp;',icon:'/images/show/nav-item-3.png',title:'石桥村',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'石桥村'},
{id:1,poster:'https://cdnly.itour.fun/50/6b0df48558fdab00efbd3ae58f0abe.png',mtitle:'金汞矿<br\/>遗址',icon:'/images/show/nav-item-4.png',title:'金汞矿遗址',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'金汞矿遗址'},
{id:1,poster:'https://cdnly.itour.fun/50/6b0df48558fdab00efbd3ae58f0abe.png',mtitle:'扶贫<br/>茶园',icon:'/images/show/nav-item-5.png',title:'扶贫茶园',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'扶贫茶园'},
{id:1,poster:'https://cdnly.itour.fun/50/6b0df48558fdab00efbd3ae58f0abe.png',mtitle:'扶贫<br/>茶园',icon:'/images/show/nav-item-5.png',title:'扶贫茶园',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'扶贫茶园'},
{id:1,poster:'https://cdnly.itour.fun/50/6b0df48558fdab00efbd3ae58f0abe.png',mtitle:'扶贫<br/>茶园',icon:'/images/show/nav-item-5.png',title:'扶贫茶园',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'扶贫茶园'}
]
}
},
methods:{
closeModal(){
this.showPoster = false
this.posterUrl = ''
},
bindSave(){
// wx.previewImage({
// urls: [this.posterUrl] // 需要预览的图片http链接列表
// });
},
bindShareEvent(){
const currentInfo = this.navs[this.activeIdx]
this.posterUrl = currentInfo.poster
this.showPoster = true
},
setActive(item,idx){
this.activeIdx = idx
}
},
created(){
}
})
</script>
......
tour.html
<!DOCTYPE html>
<html>
<head>
<title>玩转丹寨万达小镇</title>
<title>度假到丹寨</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
......@@ -37,6 +37,12 @@
// },3000)
}
/**
* 图片热点创建
* @param hs_name
* @param ath
* @param atv
*/
function add_hotspot(hs_name,ath,atv)
{
if (krpano) {
......@@ -71,7 +77,18 @@
}
window.func = function(){
console.log(3333333333)
console.log(3333333333)
}
function test(hs)
{
if(hs==='完善的设施'){
location.href='/show.html'
}
if(hs==='宜人的气候'){
location.href='/show.html'
}
}
</script>
......
tour.xml
......@@ -74,6 +74,10 @@
if(startactions !== null, startactions() );
</action>
<action name="bindJsEvent">
js(test(%1));
</action>
<scene name="scene_vr" title="vr" onstart="" thumburl="panos/vr.tiles/thumb.jpg" lat="26.20434422" lng="107.80451219" heading="0.0">
......@@ -86,44 +90,9 @@
<cube url="panos/vr.tiles/pano_%s.jpg" />
</image>
<layer name="mask"
type="container"
keep="true"
parent=""
visible="true"
enabled="true"
handcursor="true"
maskchildren="false"
scalechildren="false"
zorder="1"
style=""
align=""
edge=""
x=""
y=""
rotate="0.0"
width="100%"
height="100%"
scale="1.0"
alpha="1.0"
crop=""
onovercrop=""
ondowncrop=""
bgcolor="0x000000"
bgalpha="0.2"
bgborder="0"
bgroundedge="0"
bgshadow=""
bgcapture="false"
onover.addevent=""
onhover.addevent=""
onout.addevent=""
onclick.addevent=""
ondown.addevent=""
onup.addevent=""
onloaded.addevent=""
/>
<!-- 文字热点-->
<hotspot name="mytext"
type="text"
ath="-144.129" atv="-8" edge="center"
......@@ -133,7 +102,7 @@
css="font-family:Arial; font-size:16px; color:#FFFFFF;"
vcenter="false"
padding="8"
zorder="3"
zorder="5"
wordwrap="true"
bg="true"
bgcolor="0xFFFFFF"
......@@ -146,13 +115,14 @@
oversampling="1.0"
mipmapping="false"
onautosized=""
onclick="bindJsEvent('完善的设施')"
/>
<hotspot name="mytext2"
type="text"
ath="128.862" atv="0" edge="center"
distorted="true"
zorder="3"
zorder="5"
renderer="webgl"
html="完善的设施"
css="font-family:Arial; font-size:16px; color:#FFFFFF;"
......@@ -170,10 +140,21 @@
oversampling="1.0"
mipmapping="false"
onautosized=""
onclick="func()"
onclick="bindJsEvent('完善的设施')"
/>
<!-- 蒙层-->
</scene>
<layer name="mask"
type="container"
keep="true"
visible="true"
enabled="false"
zorder="-99999"
width="100%"
height="100%"
bgcolor="0x000000"
bgalpha="0.15"
/>
</krpano>
tour_editor.html
<!DOCTYPE html>
<html>
<head>
<title>krpano - MAKE VTOUR - Virtual Tour Editor</title>
<title>度假到丹寨</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
......@@ -26,19 +26,19 @@
var vars = {};
vars["plugin[vtoureditor].url"] = "plugins/vtoureditor.swf";
vars["plugin[vtoureditor].keep"] = true;
embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", flash:"only", passQueryParameters:false, vars:vars});
function resize()
{
var th = document.getElementById("title").clientHeight;
var ph = (typeof(window.innerHeight) == 'number') ? window.innerHeight : ((document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : ((document.body && document.body.clientHeight) ? document.body.clientHeight : 500));
document.getElementById("pano").style.height = (ph-th)+"px"
}
window.onresize = resize;
resize();
</script>
</div>
......
travel.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<title>度假到丹寨</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="/libs/rem.js"></script>
<style>
*{
margin: 0;
padding: 0;
border:none;
}
.full-img{
width: 100%;
vertical-align: top;
}
</style>
<!-- <script src="/libs/vue/vue.js"></script>-->
</head>
<body id="app">
<img class="full-img" src="/images/travel.png" />
<script>
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment