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.
205 lines
6.0 KiB
Vue
205 lines
6.0 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_pt_12 g_pb_12 g_fs_17 g_flex_row_between g_border_e_b" @click="titleNavigator">
|
|
<view class="g_fw_600">
|
|
{{ cusTitle }}
|
|
</view>
|
|
<view class="g_pr_12 g_flex_row_end flex_center">
|
|
<view class="g_c_6 g_mr_4 g_ell_1" style="max-width: 180px" v-if="subhead">
|
|
{{ subhead }}
|
|
</view>
|
|
<i v-if="titleNav" class="iconfont icon-gengduo11 g_c_c" style=""></i>
|
|
</view>
|
|
</view>
|
|
<view class="g_flex_row_start u-skeleton">
|
|
<view
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
:style="{
|
|
width: 'calc(100% / ' + num +' - 1rpx)',
|
|
}"
|
|
@click="handleClick(item, index)"
|
|
class=""
|
|
:class="[border && (index + 1) % num != 0 ? 'g_border_e_r' : '', border && index < num ? 'g_border_e_b' : '', height < 38 ? 'g_pt_16' : 'g_pt_10']"
|
|
hover-class="thover"
|
|
>
|
|
<!-- list.length < num -->
|
|
<!-- 高度比较低的情况 。 -->
|
|
<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'" class="g_mb_16 g_fs_20">{{ item.num }}</view>
|
|
<!-- style="overflow: hidden" -->
|
|
<view v-if="cusType == 'image'" :class="[`g_h_${height - 4}`]" class="g_flex_column_center">
|
|
<view class="" v-if="item.icon">
|
|
<!-- iconType单色图标的判断 1是单色 -->
|
|
<view class="iconfont g_fw_500" :class="[`icon-${item.icon}`, `g_fs_${height - 4}`]" :style="{ color: item.iconColor ? item.iconColor : '#333' }" 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 class="u-skeleton-fillet" :src="item.image" mode="widthFix" :style="{ height: height + 'px', width: height + 'px' }"></image>
|
|
{{ item.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 u-skeleton-fillet" 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}`]" :style="{ color: item.iconColor ? item.iconColor : '#333' }" 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 :src="item.image" v-else class="" 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 class="" v-if="bottomBox" @click="bottomNavigator">
|
|
<view class="g_flex_row_center flex_center g_c_sub g_p_16" hover-class="none" hover-stop-propagation="false">
|
|
<view class="icon-fadanhao-1 iconfont g_fs_18 g_mr_4"> </view>
|
|
<view class="g_fs_17 g_fw_600">发布职位</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-skeleton :loading="loading" :animation="true" bgColor="#fff"></u-skeleton>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
/* 职位，关注数展示卡片
|
|
*/
|
|
import gLoading from "@/components/loading.vue";
|
|
export default {
|
|
components: {
|
|
gLoading,
|
|
},
|
|
data() {
|
|
return {
|
|
cdnBaseImg: this.G.store().cdnBaseImg,
|
|
svgBaseImg: this.G.store().svgBaseImg,
|
|
};
|
|
},
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
// 骨架屏的loading状态
|
|
loading: {
|
|
default: () => {
|
|
return false;
|
|
},
|
|
},
|
|
speed: {
|
|
default: () => {
|
|
return -1;
|
|
},
|
|
},
|
|
num: {
|
|
type: Number,
|
|
default: () => {
|
|
return 5;
|
|
},
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: () => {
|
|
return 22;
|
|
},
|
|
},
|
|
cusBg: {
|
|
default: "",
|
|
},
|
|
cusType: {
|
|
default: "num",
|
|
},
|
|
cusTitle: {
|
|
default: "",
|
|
},
|
|
titleNav: {
|
|
default: "",
|
|
},
|
|
subhead: {
|
|
default: "",
|
|
},
|
|
|
|
// 标签距离底部距离
|
|
marginBottom: {
|
|
default: 10,
|
|
},
|
|
border: {
|
|
default: false,
|
|
},
|
|
bottomBox: {
|
|
default: false,
|
|
},
|
|
bottomNav: {
|
|
default: "",
|
|
},
|
|
},
|
|
methods: {
|
|
handleClick($item, $index) {
|
|
this.$emit("clickItem", {
|
|
item: $item,
|
|
index: $index,
|
|
});
|
|
},
|
|
titleNavigator() {
|
|
if (this.titleNav) {
|
|
this.$emit("clickItem", {
|
|
item: { path: this.titleNav },
|
|
});
|
|
}
|
|
},
|
|
bottomNavigator() {
|
|
if (this.titleNav) {
|
|
this.$emit("clickItem", {
|
|
item: { path: this.bottomNav },
|
|
});
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|