展示效果
image.png
运行地址：
http://dotwe.org/vue/9aa8b3d8d1fd7f95defdb9613797be79
代码
<template>
<div>
<scroller class='scroller'>
<div class='topView'>
<text class='topText'>可消费金额(元)</text>
<text class='topText2'>0.00</text>
<text class='topText3'>大理无息借款，查找附近直营店、加盟店去授信</text>
</div>
<slider class="slider" interval="3000" auto-play="true">
<div class="frame" v-for="img in imageList">
<image class="image" resize="cover" :src=img.src></image>
</div>
</slider>
<div v-for="(array, i) in arrays" class="row">
<div v-for="(dict, k) in array" class="item">
<div>
<image style="width:80px;height:80px;"
:src=dict.src>
</image>
<text>{{dict.title}}</text>
</div>
</div>
</div>
</scroller>
</div>
</template>
<style scoped>
.scroller {
height:1900px;
}
.topView {
background-color:#449ef6;
height:400px;
justify-content: center;
align-items:center;
}
.topText {
position: absolute;
top: 70px;
color:white;
}
.topText2 {
position: absolute;
top: 130px;
color:white;
font-size:64;
}
.topText3 {
padding-top:20px;
text-align:center;
flex:1;
height:80px;
background-color:#3e7af8;
position: absolute;
bottom: 0px;
left:0px;
right:0px;
color:white;
/*font-size:64;*/
}
.item{
flex:1;
justify-content: center;
align-items:center;
border-width:1;
border-color:#e6e6e6;
}
.row{
flex-direction: row;
height:200px;
}
.image {
/*flex:1;*/
width: 700px;
height: 300px;
}
.slider {
/*flex:1;*/
/*margin-top: 25px;*/
/*margin-left: 25px;*/
/*width: 700px;*/
height: 300px;
/*border-width: 1px;*/
/*border-style: solid;*/
/*border-color: #41B883;*/
}
.frame {
/*flex:1;*/
/*width: 700px;*/
height: 300px;
position: relative;
}
</style>
<script>
module.exports = {
data: function () {
return {
arrays:[
[
{"title":"ETC","src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"},
{"title":'Weex',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"},
{"title":'还款',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"}
],
[
{"title":'收款',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"},
{"title":'付款',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"},
{"title":'帐单',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"}
],
[
{"title":'网点',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"},
{"title":'扫一扫',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"},
{"title":'找货',"src":"http://img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg"}
]
],
imageList: [
{ src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
{ src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
{ src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
]
}
}
}
</script>
