Skip to content

shuzilixiangwaibao / wanda-vr

Go to a project
Commit 0c431726 by junxiang wang
Options

还差一个分享图、以及幻灯片。

parent ec7fed6a
Showing with 85 additions and 10 deletions
show.html
......@@ -21,6 +21,10 @@
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom: 70px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.nav-list{
......@@ -36,6 +40,11 @@
width: 57px;
height: 102px;
margin-left: 22px;
border-radius: 6px;
overflow: hidden;
}
.nav-item:last-child{
margin-right: 22px;
}
.nav-item.active{
background: rgba(23, 40, 63, 0.3);
......@@ -63,21 +72,87 @@
.nav-item__mtitle{
text-align: center;
font-size: 14px;
line-height: 16px;
color: #fff;
}
.mtitle{
margin-top: 32px;
color: #fff;
font-size: 40px;
text-align: center;
position: relative;
}
.mtitle__icon{
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
width: 33px;
height: 33px;
}
.thumb{
padding: 25px 0 30px;
text-align: center;
}
.thumb__img{
width: 369px;
}
.content{
width: 369px;
margin: 0 auto;
flex:1;
overflow-y: scroll;
}
.content__text{
font-size: 17px;
color: #fff;
line-height: 30px;
}
.bottom{
height: 70px;
position: fixed;
left: 0;
bottom:0;
width: 100%;
background-image: url("/images/show/fupin.png");
background-size: cover;
background-repeat: no-repeat;
background-position: bottom center;
}
.bottom__icon{
width: 35px;
height: 35px;
position: absolute;
right: 22px;
bottom:28px;
}
</style>
<script src="/libs/vue/vue.js"></script>
</head>
<body>
<div class="page-wrap" id="app">
<div class="nav-list">
<div class="nav-list">
<div class="nav-item" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(item,idx)">
<div class="nav-item__iconbox">
<img :src="item.icon" class="nav-item__icon" />
</div>
<div class="nav-item__mtitle" v-html="item.mtitle"></div>
</div>
</div>
</div>
<div class="mtitle">
<span>{{navs[activeIdx].title}}</span>
<img src="/images/show/yinle.png" class="mtitle__icon">
</div>
<div class="thumb">
<img class="thumb__img" :src="navs[activeIdx].thumb" />
</div>
<div class="content">
<div class="content__text" v-html="navs[activeIdx].content"></div>
</div>
<div class="bottom">
<img class="bottom__icon" src="/images/show/share.png" />
</div>
</div>
<script>
var vueInstance = new Vue({
......@@ -87,15 +162,15 @@ var vueInstance = new Vue({
activeIdx:0,
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-1.png',title:'排廷瀑布',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'排廷瀑布'},
{mtitle:'石桥村<br\/>&nbsp;',icon:'/images/show/nav-item-1.png',title:'石桥村',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'石桥村'},
{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-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:'扶贫茶园'},
{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-1.png',title:'排廷瀑布',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'排廷瀑布'},
{mtitle:'石桥村<br\/>&nbsp; ',icon:'/images/show/nav-item-1.png',title:'石桥村',thumb:'https://cdnly.itour.fun/bb/21c530a5e2677f8a0906c5f68f4fa4.png',content:'石桥村'},
{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-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:'扶贫茶园'}
]
}
},
......
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