st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
79 lines (78 loc) • 3.01 kB
JavaScript
import { defineComponent as a, openBlock as r, createElementBlock as m, normalizeStyle as n, unref as t, createElementVNode as l, renderSlot as o, toDisplayString as s } from "vue";
import * as i from "../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js";
const c = { class: "st-info-card-2__img-box" }, g = ["src"], f = { class: "st-info-card-2__title-content-container" }, S = { class: "st-info-card-2__title-content" }, u = { class: "st-info-card-2__title-box" }, _ = { class: "st-info-card-1__content-box" }, h = { class: "st-info-card-1__content-box__content" }, H = /* @__PURE__ */ a({
name: "StInfoCard2",
__name: "StInfoCard2",
props: {
width: { default: "100%" },
height: { default: "100%" },
padding: { default: "1rem" },
imgSrc: { default: "" },
imgWidth: { default: "100%" },
imgHeight: { default: "100%" },
imgSizeHover: { default: 150 },
imgFillMode: { default: "cover" },
imgPosition: { default: "center" },
imgSpeed: { default: 500 },
imgDelay: { default: 0 },
title: { default: "" },
titleFontSize: { default: "1.25rem" },
content: { default: "" },
contentSpeed: { default: 500 },
contentDelay: { default: 150 }
},
setup(p) {
return (e, d) => (r(), m("div", {
class: "st-info-card-2",
style: n({
"--padding": t(i).elSizePreHandler(e.padding),
"--img-width": t(i).elSizePreHandler(e.imgWidth),
"--img-height": t(i).elSizePreHandler(e.imgHeight),
"--img-size--hover": t(i).elSizePreHandler(e.imgSizeHover),
"--img-speed": t(i).elSizePreHandler(e.imgSpeed, "ms"),
"--img-delay": t(i).elSizePreHandler(e.imgDelay, "ms"),
"--content-speed": t(i).elSizePreHandler(e.contentSpeed, "ms"),
"--content-delay": t(i).elSizePreHandler(e.contentDelay, "ms"),
width: t(i).elSizePreHandler(e.width),
height: t(i).elSizePreHandler(e.height)
})
}, [
d[0] || (d[0] = l("div", { class: "st-info-card-2__img-placeholder" }, null, -1)),
l("div", c, [
o(e.$slots, "img", {}, () => [
l("img", {
class: "st-info-card-2__img-box__img",
style: n({
objectFit: e.imgFillMode,
objectPosition: e.imgPosition
}),
src: e.imgSrc,
alt: ""
}, null, 12, g)
], !0)
]),
l("div", f, [
l("div", S, [
l("div", u, [
o(e.$slots, "title", {}, () => [
l("div", {
class: "st-info-card-2__title-box__title",
style: n({
fontSize: t(i).elSizePreHandler(e.titleFontSize)
})
}, s(e.title), 5)
], !0)
]),
l("div", _, [
o(e.$slots, "content", {}, () => [
l("div", h, s(e.content), 1)
], !0)
])
])
])
], 4));
}
});
export {
H as default
};