<template>
	<view>
		<view class="flbtn" style="background-color: #fff;">
			<view class="bd-color"  :style="leftStyle">
				
			</view>
			<view class="center" :style="'padding-top: '+ (width / 2 -1 ) +'rpx;'">
				<u-line dashed></u-line>
			</view>
			<view class="bd-color" :style="rightStyle">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"card_style",
		props:{
			width:{
				type:Number,
				default:40
			},
			bgColor:{
				type:String,
				default:'#f5f5f5'
			}
		},
		computed: {
			leftStyle(){
				return 'background:'+ this.bgColor+';width: '+ this.width/2 +'rpx;height: '+ this.width+'rpx;border-radius: 0 '+ this.width/2+'rpx '+  this.width/2 +'rpx 0;'
			},
			rightStyle(){
				return 'background:'+ this.bgColor+';width: '+ this.width/2 +'rpx;height: '+ this.width+'rpx;border-radius: '+ this.width/2+'rpx 0  0 '+  this.width/2 +'rpx;'
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style>

.center{
	width: 100%;
	/* height: 40rpx; */
	
	/* padding: 19rpx 5%; */
}
.right-box{
	border-radius: 20rpx 0  0 20rpx;
	background-color: #ededed;
}
</style>