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.
108 lines
2.3 KiB
108 lines
2.3 KiB
<template>
|
|
<view
|
|
class="grace-box-banner gui-flex gui-rows gui-nowrap"
|
|
:style="{
|
|
backgroundColor:background,
|
|
paddingTop:padding,
|
|
paddingBottom:padding,
|
|
borderRadius:borderRadius
|
|
}">
|
|
<view
|
|
class="grace-box-items gui-flex gui-rows gui-nowrap gui-align-items-center"
|
|
hover-class="gui-tap"
|
|
v-for="(item, index) in items"
|
|
:key="index"
|
|
@tap.stop="taped(index)">
|
|
<view
|
|
class="gui-flex1">
|
|
<view
|
|
class="gui-flex gui-rows gui-nowrap gui-justify-content-center gui-align-items-center">
|
|
<text
|
|
class="gui-block-text"
|
|
:style="{
|
|
lineHeight:lineHeight,
|
|
color:color[0],
|
|
fontSize:fontSize[0]
|
|
}">{{item[0]}}</text>
|
|
<text
|
|
class="gui-block-text"
|
|
:style="{
|
|
color:color[1],
|
|
fontSize:fontSize[1],
|
|
marginLeft:'5rpx'
|
|
}">{{item[1]}}</text>
|
|
</view>
|
|
<text
|
|
class="gui-block-text gui-text-center"
|
|
:style="{
|
|
color:color[2],
|
|
fontSize:fontSize[2]
|
|
}">{{item[2]}}</text>
|
|
</view>
|
|
<view
|
|
class="grace-box-line"
|
|
:style="{
|
|
'height' : borderHeight,
|
|
'border-right-width': borderWidth,
|
|
'border-right-style': borderStyle,
|
|
'border-right-color': borderColor
|
|
}"
|
|
v-if="index < items.length - 1"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name : "gui-box-banner",
|
|
props : {
|
|
items:{
|
|
type : Array,
|
|
default : function () {
|
|
return []
|
|
}
|
|
},
|
|
color:{
|
|
type : Array,
|
|
default : function () {
|
|
return ['#333333', 'rgba(69, 90, 100, 0.5)', 'rgba(69, 90, 100, 0.5)']
|
|
}
|
|
},
|
|
fontSize:{
|
|
type : Array,
|
|
default : function () {
|
|
return ['36rpx', '24rpx', '24rpx']
|
|
}
|
|
},
|
|
background : {
|
|
type : String,
|
|
default : ''
|
|
},
|
|
padding:{
|
|
type : String,
|
|
default : '20rpx'
|
|
},
|
|
borderRadius:{
|
|
type : String,
|
|
default : '10rpx'
|
|
},
|
|
lineHeight:{
|
|
type : String,
|
|
default : '60rpx'
|
|
},
|
|
borderColor : {type:String, default:'#F1F1F1'},
|
|
borderWidth : {type:String, default:'1px'},
|
|
borderStyle : {type:String, default:'solid'},
|
|
borderHeight: {type:String, default:'60rpx'}
|
|
},
|
|
methods:{
|
|
taped:function (index) {
|
|
this.$emit('taped', index);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.grace-box-banner{overflow:hidden;}
|
|
.grace-box-items{width:100rpx; flex:1;}
|
|
.grace-box-line{width:1px; height:50rpx;}
|
|
</style>
|