You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
3.8 KiB
Vue
133 lines
3.8 KiB
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>
|