@ccos/webos-vue
Version:
A Web-Ui Framework for Skyworth/Coocaa TV
211 lines (210 loc) • 7.69 kB
JavaScript
import { toRef, ref, reactive, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, unref } from "vue";
import { cardProps, useCard } from "./index49.mjs";
import { px2vw } from "./index45.mjs";
import "./index51.mjs";
import _export_sfc from "./index34.mjs";
const _sfc_main = {
__name: "card-image",
props: {
...cardProps,
//
icon: {
// icon
type: String,
required: false,
default: ""
},
imgUrl: {
// 图片地址
type: String,
required: false,
default: ""
},
align: {
// 对齐方式：接受两个值：left 和 center (默认)
type: String,
required: false,
default: ""
}
},
setup(__props) {
const props = __props;
const width = toRef(props, "width");
const height = toRef(props, "height");
toRef(props, "title");
toRef(props, "subTitle");
const icon = toRef(props, "icon");
const imgUrl = toRef(props, "imgUrl");
const align = toRef(props, "align");
const {
cardRef,
cardStyle,
cardDesignWidth,
cardDesignHeight,
updateLayout
} = useCard();
const isUpDownStruct = ref(false);
const isLeftRightStruct = ref(false);
const leftRightStructStyle = reactive({});
const leftRightStructTextAreaStyle = reactive({});
const leftRightStructTextMain = reactive({});
const leftRightStructTextSub = reactive({});
const hasIconOrImage = ref(false);
const alignLeft = ref(false);
const useImage = ref(false);
const upDownStructStyle = reactive({});
const upDownStructIconPartStyle = reactive({});
const upDownStructGapStyle = reactive({});
const upDownStructTitleStyle = reactive({});
const upDownStructSubTitleStyle = reactive({});
const upDownStructIconImageStyle = reactive({});
ref(null);
const updateLayoutCallBack = () => {
console.log("updateLayoutCallBack cardDesignWidth = " + cardDesignWidth.value);
if (cardDesignWidth.value <= 320) {
updateLeftRightStructStyle();
isUpDownStruct.value = false;
isLeftRightStruct.value = true;
} else {
updateUpDownStructStyle();
isUpDownStruct.value = true;
isLeftRightStruct.value = false;
}
};
const updateLeftRightStructStyle = () => {
let designW = cardDesignWidth.value;
let designH = designW * 9 / 16;
cardStyle["height"] = "" + px2vw(designH) + "vw";
let contentH = designH > 80 ? 80 : designH;
leftRightStructStyle["height"] = "" + px2vw(contentH) + "vw";
let contentW = designW;
leftRightStructStyle["width"] = "" + px2vw(contentW) + "vw";
cardStyle["display"] = "flex";
cardStyle["align-items"] = "center";
cardStyle["justify-content"] = "left";
if (icon.value || imgUrl.value) {
alignLeft.value = false;
if (imgUrl.value) {
useImage.value = true;
} else {
useImage.value = false;
}
let textAreaW = contentW - 28 - 80 - 16;
if (textAreaW < 0)
textAreaW = 0;
leftRightStructTextAreaStyle["width"] = "" + px2vw(textAreaW) + "vw";
leftRightStructTextAreaStyle["height"] = "" + px2vw(contentH) + "vw";
leftRightStructTextAreaStyle["display"] = "inline-block";
leftRightStructTextAreaStyle["vertical-align"] = "top";
leftRightStructTextMain["width"] = "" + px2vw(textAreaW) + "vw";
leftRightStructTextMain["height"] = "" + px2vw(44) + "vw";
leftRightStructTextSub["width"] = "" + px2vw(textAreaW) + "vw";
leftRightStructTextSub["height"] = "" + px2vw(38) + "vw";
hasIconOrImage.value = true;
} else {
let textAreaW;
if (align.value && align.value.toString().toLowerCase() == "left") {
alignLeft.value = true;
textAreaW = contentW - 28;
if (textAreaW < 0)
textAreaW = 0;
leftRightStructTextMain["text-align"] = "left";
leftRightStructTextSub["text-align"] = "left";
} else {
alignLeft.value = false;
textAreaW = contentW;
leftRightStructTextMain["text-align"] = "center";
leftRightStructTextSub["text-align"] = "center";
}
leftRightStructTextAreaStyle["width"] = "" + px2vw(textAreaW) + "vw";
leftRightStructTextAreaStyle["height"] = "" + px2vw(contentH) + "vw";
leftRightStructTextAreaStyle["display"] = "inline-block";
leftRightStructTextAreaStyle["vertical-align"] = "top";
leftRightStructTextMain["width"] = "" + px2vw(textAreaW) + "vw";
leftRightStructTextMain["height"] = "" + px2vw(44) + "vw";
leftRightStructTextSub["width"] = "" + px2vw(textAreaW) + "vw";
leftRightStructTextSub["height"] = "" + px2vw(38) + "vw";
hasIconOrImage.value = false;
}
};
const updateUpDownStructStyle = () => {
let designH = cardDesignHeight.value;
cardStyle["display"] = "flex";
cardStyle["align-items"] = "center";
cardStyle["justify-content"] = "left";
if (imgUrl.value) {
useImage.value = true;
} else {
useImage.value = false;
}
let iconH;
let gapH;
let titleH;
let subTitleH;
let allContentH;
let titleFontSize;
let subTitleFontSize;
if (designH < 230) {
iconH = 64;
gapH = 12;
titleH = 44;
subTitleH = 38;
allContentH = 158;
titleFontSize = 28;
subTitleFontSize = 24;
} else if (designH < 310) {
iconH = 80;
gapH = 16;
titleH = 50;
subTitleH = 40;
allContentH = 186;
titleFontSize = 32;
subTitleFontSize = 26;
} else {
iconH = 120;
gapH = 40;
titleH = 50;
subTitleH = 40;
allContentH = 250;
titleFontSize = 32;
subTitleFontSize = 26;
}
upDownStructStyle["width"] = "100%";
upDownStructStyle["height"] = "" + px2vw(allContentH) + "vw";
upDownStructIconPartStyle["width"] = "100%";
upDownStructIconPartStyle["height"] = "" + px2vw(iconH) + "vw";
upDownStructIconPartStyle["text-align"] = "center";
upDownStructIconImageStyle["width"] = "" + px2vw(iconH) + "vw";
upDownStructIconImageStyle["height"] = "" + px2vw(iconH) + "vw";
upDownStructGapStyle["width"] = "100%";
upDownStructGapStyle["height"] = "" + px2vw(gapH) + "vw";
upDownStructTitleStyle["width"] = "100%";
upDownStructTitleStyle["height"] = "" + px2vw(titleH) + "vw";
upDownStructTitleStyle["line-height"] = "" + px2vw(titleH) + "vw";
upDownStructTitleStyle["font-size"] = "" + px2vw(titleFontSize) + "vw";
upDownStructTitleStyle["text-align"] = "center";
upDownStructSubTitleStyle["width"] = "100%";
upDownStructSubTitleStyle["height"] = "" + px2vw(subTitleH) + "vw";
upDownStructSubTitleStyle["line-height"] = "" + px2vw(subTitleH) + "vw";
upDownStructSubTitleStyle["font-size"] = "" + px2vw(subTitleFontSize) + "vw";
upDownStructSubTitleStyle["text-align"] = "center";
};
onMounted(() => {
});
onBeforeUnmount(() => {
});
updateLayout(width.value, height.value, updateLayoutCallBack);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "cardRef",
ref: cardRef,
style: normalizeStyle(unref(cardStyle)),
class: "card-text-component"
}, null, 4);
};
}
};
const TvCardImage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2c21b19e"]]);
export {
TvCardImage as default
};