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.
141 lines
3.5 KiB
Vue
141 lines
3.5 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>
|
|
<slot></slot>
|
|
<i v-if="titleNav" class="iconfont icon-gengduo11 g_c_c" style=""></i>
|
|
</view>
|
|
</view>
|
|
<view style="width: calc(100vw - 20px); overflow: hidden; margin: 0 auto; overflow-x: auto">
|
|
<view class="g_flex_row_between g_ml_10 g_mr_10" :class="['g_pt_10']" style="column-gap: 10px">
|
|
<view
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
:style="{
|
|
flex: 1,
|
|
}"
|
|
@click="handleClick(item, index)"
|
|
hover-class="thover"
|
|
>
|
|
<view class="g_flex_row_center flex_center g_pb_10 g_position_rela">
|
|
<img :src="item.url" alt="" class="g_radius_6" mode="widthFix" style="width: 100%; height: 100%" />
|
|
<div class="g_position_abso g_bg_f g_radius_2 g_flex_row_between flex_center" style="width: 94%; height: 15%; padding: 0 3px; transform: translateX(-50%); left: 50%; bottom: 9%; box-sizing: border-box">
|
|
<div class="g_position_rela g_flex_row_start flex_center flex_nw g_flex_1 g_h_all">
|
|
<!-- <img style="min-width: 8px; min-height: 8px; max-width: 8px; max-height: 8px" :src="miniAppInfo.logo || 'https://matripe.oss-cn-beijing.aliyuncs.com/default.png'" alt="" /> -->
|
|
<div class="g_ml_2 g_position_abso" style="left: 0px; transform-origin: left; transform: scale(0.4); width: calc(200%)">
|
|
<div :style="{ fontSize: '12px' }">
|
|
{{ miniAppInfo.fullName || miniAppInfo.agencyName }}
|
|
</div>
|
|
<div class="g_ell_1 g_w_all" :style="{ fontSize: '10px' }">
|
|
{{ miniAppInfo.slogan }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img style="width: 14px; height: 14px" :src="qrcode" alt="" />
|
|
</div>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
/* 海报专用的卡片组件
|
|
*/
|
|
export default {
|
|
data() {
|
|
return {
|
|
cdnBaseImg: this.G.store().cdnBaseImg,
|
|
svgBaseImg: this.G.store().svgBaseImg,
|
|
miniAppInfo: uni.getStorageSync("miniApp-info"),
|
|
qrcode: uni.getStorageSync("user_qrcode"),
|
|
};
|
|
},
|
|
props: {
|
|
// 纯显示图片的判断
|
|
cardType: {
|
|
type: String,
|
|
default: () => {
|
|
return "";
|
|
},
|
|
},
|
|
list: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
speed: {
|
|
default: () => {
|
|
return -1;
|
|
},
|
|
},
|
|
num: {
|
|
type: Number,
|
|
default: () => {
|
|
return 5;
|
|
},
|
|
},
|
|
cusBg: {
|
|
default: "",
|
|
},
|
|
cusType: {
|
|
default: "num",
|
|
},
|
|
cusTitle: {
|
|
default: "",
|
|
},
|
|
titleNav: {
|
|
default: "",
|
|
},
|
|
subhead: {
|
|
default: "",
|
|
},
|
|
// 标签距离底部距离
|
|
marginBottom: {
|
|
default: 10,
|
|
},
|
|
ishidden: {
|
|
default: 0,
|
|
},
|
|
},
|
|
methods: {
|
|
handleClick($item, $index) {
|
|
if (this.cardType != "img") {
|
|
this.$emit("clickItem", {
|
|
item: $item,
|
|
index: $index,
|
|
});
|
|
} else {
|
|
// console.log("$item", $item);
|
|
this.$emit("clickImg", $item);
|
|
}
|
|
},
|
|
titleNavigator() {
|
|
// console.log("this.titleNav", this.titleNav);
|
|
if (this.titleNav) {
|
|
this.$emit("clickItem", {
|
|
item: { path: this.titleNav },
|
|
});
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|