You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/components/UiCell.vue

76 lines
1.3 KiB

<!--
* @Author: ch
* @Date: 2022-03-26 18:29:19
* @LastEditors: ch
* @LastEditTime: 2022-03-28 15:57:22
* @Description: file content
-->
<template>
<view class="uiCell" @click="$emit('click')">
<slot name="icon"></slot>
<view class="uiCell--left">
<text class="uiCell--title">{{title}}</text>
<text class="uiCell--label">{{label}}</text>
</view>
<slot name="value">
<text class="uiCell--value">{{value}}</text>
</slot>
<slot name="right-icon" v-if="rightIcon">
<image class="uiCell--rightIcon" src="@/static/common/arrow.png"/>
</slot>
</view>
</template>
<script>
export default {
props : {
title : {
type: String,
default : ''
},
label : {
type: String,
default : ''
},
value : {
type : String,
default : ''
},
rightIcon : {
type : Boolean,
default : true
}
}
}
</script>
<style lang="scss" scoped>
.uiCell{
min-height: 100rpx;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
&--title{
color: #333;
font-size: 28rpx;
display: block;
}
&--label{
color: #999;
font-size: 24rpx;
display: block;
margin-top: 10rpx;
}
&--value{
flex: 1;
padding: 0 10rpx;
text-align: right;
font-size: 28rpx;
}
&--rightIcon{
width: 10rpx;
height: 20rpx;
margin-left: 18rpx;
}
}
</style>