template-project/components/function-list/function-list.vue

86 lines
2.0 KiB
Vue

<template>
<view>
<view @tap="chooseItem(index)" v-for="(item,index) in list" :key="index"
class="item-box display-between-center">
<view class="display-between-center">
<view class="display-center-center left-box">
<image v-if="item.leftImg!=''"
:style="{width:[26,38,40,33][index]+'rpx',height:[36,38,40,31][index]+'rpx'}"
:src="item.leftImg" mode="widthFix" lazy-load></image>
</view>
<view class="item-title">{{item.title}}</view>
</view>
<view class="display-between-center">
<view class="item-content">{{item.content}}</view>
<i class='icon icon-next' style="font-size: 28rpx;color: #8c8c9b;"></i>
</view>
</view>
</view>
</template>
<script>
export default {
name:"function-list",
props:{
list:{
type:Array,
default:()=>{
return [
{
leftImg:'/static/public/icon-address.png',
title:'收货地址',
num:0,
content:'',
rightImg:'',
url:''
},
{
leftImg:'/static/public/icon-distribution.png',
title:'分销中心',
num:0,
content:'百万奖金等你来拿',
rightImg:'',
url:''
},
{
leftImg:'/static/public/icon-duty.png',
title:'免责声明',
num:0,
content:'',
rightImg:'',
url:''
},
{
leftImg:'/static/public/icon-aboutus.png',
title:'关于我们',
num:0,
content:'',
rightImg:'',
url:''
}
]
}
}
},
data() {
return {};
},
methods:{
chooseItem(index){
uni.navigateTo({
url: this.list[index].url
})
}
}
}
</script>
<style scoped>
.display-between-center {display: flex;justify-content: space-between;align-items: center;}
.display-center-center {display: flex;justify-content: center;align-items: center;}
.item-box{padding: 30rpx 0;}
.left-box{width: 40rpx;height: 40rpx;margin-right: 20rpx;}
.item-title {font-size: 30rpx;color: #000000;}
.item-content {font-size: 24rpx;color: #8c8c9b;margin-right: 10rpx;}
</style>