自定义cell控件
<template>
<!-- 行元素组件 -->
<view class="content">
<view class="cell-item" :style="border ? 'border-bottom:2rpx solid #DBE2EC' : ''">
<view class="cell-item-main">
<slot name="icon"></slot>
<view class="cell-item-icon" v-if="icon != ''">
<image :src="icon" class="cell-item-icon-content" mode="scaleToFill"></image>
</view>
<view class="cell-item-content">
<p class="cell-item-title">{
{title}}</p>
<view class="cell-item-desc" v-if="label != '' || status != ''">
<view class="cell-item-label">
{
{label}}
</view>
<template v-if="status != ''">
<view class="cell-item-line mr15 ml15"></view>
<view class="cell-item-status">
{
{status}}
</view>
</template>
</view>
</view>
</view>
<view class="cell-item-arrow">
<image src="@/static/common/ic-common-arrow-right.png" class="cell-item-arrow-content" mode="scaleToFill"></image>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
icon:{
type:String,
default:''
},
title:{
type:String,
default:'title'
},
label:{
type:String,
default:'label'
},
status:{
type:String,
default:'status'
},
border:{
type:Boolean,
default:false
}
},
data() {
return {
}
},
methods:{
gotoLoadMore(){
console.log('跳转加载更多',this.loadMore)
}
}
}
</script>
<style scoped lang="scss">
.content{
padding: 0 20rpx;
.cell-item{
display: flex;
align-items: center;
padding: 20rpx 0;
.cell-item-main{
flex: 1;
min-height: 100rpx;
display: flex;
align-items: center;
.cell-item-icon{
width: 180rpx;
height: 180rpx;
.cell-item-icon-content{
width: 100%;
height: 100%;
}
}
.cell-item-content{
flex: 1;
.cell-item-title{
padding: 15rpx 0;
font-size: 33rpx;
font-weight: 600;
height: 50rpx;
}
.cell-item-desc{
display: flex;
align-items: center;
color: #777777;
height: 40rpx;
.cell-item-label{
}
.cell-item-line{
width: 5rpx;
height: 30rpx;
background: #DBE2EC;
}
.cell-item-status{
}
}
}
}
.cell-item-arrow{
width: 40rpx;
height: 40rpx;
.cell-item-arrow-content{
width: 100%;
height: 100%;
}
}
}
.cell-item-bottom-border{
border-top: 2rpx solid #DBE2EC;
}
}
</style>