bocai_supplyChain_uni/components/panel/numCard.vue

<template>
	<view>
		<view
			class="m-data g_ml_10 g_mr_10 g_radius_8"
			:style="{
				backgroundColor: cusBg ? cusBg : '#fff',
			}"
		>
			<view v-if="cusTitle" class="g_pl_16 g_fs_16 g_fw_600 g_pt_12 g_pb_12" style="border-bottom: 1px solid #f5f5f5">
				{{ cusTitle }}
			</view>
			<view class="g_flex_row_start" :class="height < 38 ? 'g_pt_16' : 'g_pt_10'">
				<view
					v-for="(item, index) in list"
					:key="index"
					:style="{
						width: 'calc(100% / ' + num + ')',
					}"
					@click="handleClick(item, index)"
					hover-class="thover"
				>
					<!-- 高度比较低的情况 。 -->
					<view :class="[`g_h_${height}`]" v-if="height < 38">
						<view class="g_flex_row_center g_fs_28 g_c_3" :class="item.num == '-' ? '' : 'g_fw_bold'" v-if="speed == 1">
							<view style="position: relative">
								<view v-if="cusType == 'num'">{{ item.num }}</view>
								<view v-if="cusType == 'image'" :class="[`g_h_${height - 4}`]" class="g_flex_column_center" style="overflow: hidden">
									<view class="" v-if="item.icon">
										<!-- iconType单色图标的判断 1是单色 -->
										<view class="iconfont  g_fw_500" :class="[`icon-${item.icon}`, `g_fs_${height - 4}`]" v-if="item.iconType == 1"> </view>
										<view
											:class="[`g_h_${height - 4}`, `g_w_${height - 4}`, `t-icon-${item.icon}`, 't-icon']"
											style="background-repeat: no-repeat; background-position: 0px 1px; background-size: 95%"
											:style="{
												width: `${height - 4}px`,
												height: `${height - 4}px`,
											}"
											v-else
										></view>
									</view>

									<image v-else :src="svgBaseImg + item.image" mode="widthFix" :style="{ height: height + 'px', width: height + 'px' }"></image>
								</view>
								<view v-if="item.tip" style="position: absolute; right: -10px; top: 0" class="g_w_6 g_h_6 g_radius_50 g_bg_f40"></view>
							</view>
						</view>
						<view v-if="speed == 0" class="g_flex_c g_h_28">
							<g-loading minHeight="0" text="empty" />
						</view>
					</view>
					<!-- 高度比较高的情况 。 -->
					<view class="g_h_48" v-else>
						<view class="g_flex_row_center g_fs_28 g_c_3 g_h_48" :class="item.num == '-' ? '' : 'g_fw_bold'" v-if="speed == 1">
							<view style="position: relative">
								<view v-if="cusType == 'num'">{{ item.num }}</view>
								<view v-if="cusType == 'image'" class="g_h_48 g_flex_column_center" style="overflow: hidden">
									<image :src="svgBaseImg + item.image" mode="widthFix" :style="{ height: height + 'px', width: height + 'px' }"></image>
								</view>
								<view v-if="item.tip" style="position: absolute; right: -10px; top: 0" class="g_w_6 g_h_6 g_radius_50 g_bg_f40"></view>
							</view>
						</view>
						<view v-if="speed == 0" class="g_flex_c g_h_48">
							<g-loading minHeight="0" text="empty" />
						</view>
					</view>
					<view class="g_flex_row_center g_fs_14 g_c_6 g_mt_2" :class="[`g_mb_${marginBottom}`]">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/* 职位，关注数展示卡片
 */
export default {
	data() {
		return {
			cdnBaseImg: this.G.store().cdnBaseImg,
			svgBaseImg: this.G.store().svgBaseImg,
		};
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			},
		},
		speed: {
			default: () => {
				return -1;
			},
		},
		num: {
			type: Number,
			default: () => {
				return 5;
			},
		},
		height: {
			type: Number,
			default: () => {
				return 22;
			},
		},
		cusBg: {
			default: "",
		},
		cusType: {
			default: "num",
		},
		cusTitle: {
			default: "",
		},
		// 标签距离底部距离
		marginBottom: {
			default: 10,
		},
	},
	methods: {
		handleClick($item, $index) {
			this.$emit("clickItem", {
				item: $item,
				index: $index,
			});
		},
	},
};
</script>

<style></style>