Commit 0c431726 by junxiang wang

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

parent ec7fed6a
...@@ -21,6 +21,10 @@ ...@@ -21,6 +21,10 @@
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom center; background-position: bottom center;
padding-bottom: 70px;
box-sizing: border-box;
display: flex;
flex-direction: column;
} }
.nav-list{ .nav-list{
...@@ -36,6 +40,11 @@ ...@@ -36,6 +40,11 @@
width: 57px; width: 57px;
height: 102px; height: 102px;
margin-left: 22px; margin-left: 22px;
border-radius: 6px;
overflow: hidden;
}
.nav-item:last-child{
margin-right: 22px;
} }
.nav-item.active{ .nav-item.active{
background: rgba(23, 40, 63, 0.3); background: rgba(23, 40, 63, 0.3);
...@@ -63,21 +72,87 @@ ...@@ -63,21 +72,87 @@
.nav-item__mtitle{ .nav-item__mtitle{
text-align: center; text-align: center;
font-size: 14px; 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; 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> </style>
<script src="/libs/vue/vue.js"></script> <script src="/libs/vue/vue.js"></script>
</head> </head>
<body> <body>
<div class="page-wrap" id="app"> <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" v-for="(item,idx) in navs" :key="idx" :class="{active:idx===activeIdx}" @click="setActive(item,idx)">
<div class="nav-item__iconbox"> <div class="nav-item__iconbox">
<img :src="item.icon" class="nav-item__icon" /> <img :src="item.icon" class="nav-item__icon" />
</div>
<div class="nav-item__mtitle" v-html="item.mtitle"></div>
</div> </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> </div>
<script> <script>
var vueInstance = new Vue({ var vueInstance = new Vue({
...@@ -87,15 +162,15 @@ var vueInstance = new Vue({ ...@@ -87,15 +162,15 @@ var vueInstance = new Vue({
activeIdx:0, activeIdx:0,
navs:[ 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\/>瀑布',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-1.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-1.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-1.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\/>瀑布',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-1.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-1.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-1.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