<template>
	<view class="g-components-panel-about">
		<view :class="color">
			<!-- <view class="g_h_10"></view> -->
			<view class="g_flex_row_between g_h_36 g_radius_4 _bg">
					<view class="g_flex_column_center">
							<view class="g_flex_row_start g_pl_12">
									<view class="g_flex_c _icon" style="width: 20px;height: 20px;border-radius: 8px;">
											<i class="iconfont icon-xiaoxitongzhi _i" style="font-size: 13px;"></i>
									</view>
									<view class="g_fs_12 g_ml_5 _str" style="line-height:20px">{{str}}</view>
							</view>
					</view>
					<view class="g_pr_12 g_flex_column_center">
							<view class="btn g_w_42 g_h_24 g_radius_13 g_flex_c g_fs_12 _btn">关注</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	/* 关注
	 */
	export default {
		props:{
			str:{
				type:String,
				default:()=>{
					return "关注发单助手公众号，不错过重要通知"
				}
			},
			color:{
				type:String,
				default:()=>{
					return "green"
				}
			}
		}
	}
</script>

<style lang="scss">
	.g-components-panel-about{
		.green{
			._bg{
				background-color: rgba(0,182,102,0.08);;
			}
			._icon{
				background: rgba(0,182,102,0.70);
			}
			._str{
				color: #00B666;
			}
			._i{
				color: #fff;
			}
			._btn{
				border: 1px solid rgba(0,182,102,0.80);
				color: #00B666;
			}
		}
		.red{
			._bg{
				background-color: #FFEEE9;
			}
			._icon{
				background: #ffdede;
			}
			._str,._i{
				color: #ff4400;
			}
			._btn{
				border: 1px solid #ff0000;
				color: #ff4400;
			}
		}
	}
</style>