<template>
	<view class="g-components-panel-server">
		<!-- 旧版 -->
		<view class="g_w_60" v-if="verson == 'default'">
			<view class="g_bg_f40 g_c_f g_fs_12 g_h_20 g_flex_c g_lh_1_2" 
					  style="border-top-left-radius: 8rpx;border-top-right-radius: 8rpx;">服务费</view>
			<view class="g_bg_f40_7 g_c_f40 g_fs_12 g_h_20 g_flex_c g_lh_1_2" 
						style="border-bottom-left-radius: 8rpx;border-bottom-right-radius: 8rpx;">{{str}}</view>
		</view>
		<!-- 新版 -->
		<view class="" v-if="verson == 'new'" style="min-width: 70px;">
			<view class="g_radius_20 g_flex_row_start" 
					  style="border: 1px solid #ff4400;min-width: 70px;height: 24px;"
			>
				<view class="g_w_22 g_flex_none g_flex_c g_fs_12 g_c_f40 g_lh_1_2">费</view>
				<view class="g_flex_1 g_flex_c g_fs_12 g_bg_f40 g_c_f g_lh_1_2 g_pl_4 g_pr_4"
							style="border-top-right-radius: 20px;border-bottom-right-radius: 20px;zoom: 1;"
				>{{str || '-'}}</view>
			</view>
		</view>
	</view>	
</template>

<script>
	/* 服务费UI
	 * @params str 具体的服务费字段
	 */
	export default{
		props:{
			str:{
				default:()=>{
					return ""
				}
			},
			verson:{
				type:String,
				default:()=>{
					return 'default';
				}
			}
		}
	}
</script>

<style>
</style>