apply-assistant-v3/components/panel/fond.vue

<template>
	<view class="g-components-panel-fond">
		<view class="g_fs_14 g_c_9 g_mb_10" v-if="showRemark">关注更多发单号，浏览更多职位</view>
		<view class="g_flex_row_between g_bg_f g_radius_8 g_p_16" hover-class="g_bg_e"
				  @click="handleClickCard"
		>
			<view class="g_flex_1 g_flex_row_start">
				<view class="g_flex_none g_mr_11 g_w_40 g_h_40 g_flex_c">
					<i class="t-icon " :class="item.icon" style="width: 40px;height: 40px;"></i>
				</view>
				<view class="g_flex_1 g_flex_column_between">
					<view class="g_fs_16 g_c_3 g_fw_600">{{item.title}}</view>
					<view class="g_c_9"
								:class="item.remarkFS ? 'g_fs_' + item.remarkFS : 'g_fs_14'"
					>{{item.remark}}</view>
				</view>
			</view>
			<view class="g_flex_none g_flex_column_center" v-if="showRight">
				<view class="g_flex_c g_fs_14 g_radius_14 g_pl_12 g_pr_12 g_pt_4 g_pb_4" 
							:class="'btn-' + themeColor"
				>{{btnText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	/* 上粉丝卡片
	 * @params item 展示信息
	 * @param  themeColor 主题色
	 * @param showRemark 是否显示顶部备注  
	 * @function clickBtn 按钮点击事件
	 */
	export default{
		props:{
			item:{
				type:Object,
				default:()=>{
					return {
						icon:"t-icon-xunzhaoshangyou",
						title:"寻找发单号",
						remark:"寻找发单号优质订单"
					}
				}
			},
			themeColor:{
				type:String,
				default:()=>{
					return "blue"
				}
			},
			showRemark:{
				type:Boolean,
				default:()=>{
					return true
				}
			},
			btnText:{
				type:String,
				default:()=>{
					return "去关注"
				}
			},
			showRight:{
				type:Boolean,
				default:()=>{
					return true
				}
			}
		},
		methods:{
			handleClickCard(){
				this.$emit('clickCard')
			},
		}
	}
</script>

<style>
	.btn-green{
		background: rgba(0,182,102,0.05);
		color: #00b666;
	}
	.btn-blue{
		color: #7C9EDD;
		background-color: #E7F3FF;
	}
</style>