dreamland/lib/graceUI/components/graceBoxBanner.vue

<template>
	<view class="grace-box-banner" :style="{background:background, paddingTop:padding, paddingBottom:padding, borderRadius:borderRadius}">
	    <view class="grace-box-items" v-for="(item, index) in items" :key="index" @tap.stop="taped(index)"
		:style="{borderRight : index+1 >= items.length ? '0rpx' : border[0]+' '+border[1]+' '+border[2]}">
	        <view class="grace-box-banner-line" :style="{lineHeight:lineHeight}">
				<text class="grace-box-banner-line-text1" :style="{color:color[0],fontSize:fontSize[0]}">{{item[0]}}</text>
				<text class="grace-box-banner-line-text2" :style="{color:color[1],fontSize:fontSize[1]}">{{item[1]}}</text></view>
	        <view class="grace-box-banner-line">
				<text :style="{color:color[2],fontSize:fontSize[2]}">{{item[2]}}</text>
			</view>
	    </view>
	</view>
</template>
<script>
export default {
	props: {
		items:{
			type : Array,
			default : function () {
				return []
			}
		},
		color:{
			type : Array,
			default : function () {
				return ['#333333', '#999999', '#999999']
			}
		},
		fontSize:{
			type : Array,
			default : function () {
				return ['36rpx', '24rpx', '24rpx']
			}
		},
		background : {
			type : String,
			default : ''
		},
		padding:{
			type : String,
			default : '25rpx'
		},
		border:{
			type:Array,
			default:function () {return ["none","",""];}
		},
		borderRadius:{
			type : String,
			default : '10rpx'
		},
		lineHeight:{
			type : String,
			default : '1.5em'
		}
	},
	methods:{
		taped:function (index) {
			this.$emit('taped', index);
		}
	}
}
</script>
<style scoped>
.grace-box-banner{padding:26rpx 0; display:flex; flex-wrap:nowrap; overflow:hidden;}
.grace-box-items{width:100%;}
.grace-box-banner-line{overflow:hidden; display:flex; width:100%; justify-content:center; align-items:center; line-height:1.5em; padding-top:8rpx;}
.grace-box-banner-line-text1{}
.grace-box-banner-line-text2{margin-left:3px;}
</style>