@ccos/webos-vue/dist/es/index15.mjs

A Web-Ui Framework for Skyworth/Coocaa TV

import { toRef, ref, reactive, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, unref, createCommentVNode, createElementVNode, toDisplayString } from "vue";
import { cardProps, useCard } from "./index49.mjs";
import { px2vw } from "./index45.mjs";
import "./index50.mjs";
import _export_sfc from "./index34.mjs";
const _hoisted_1 = {
  key: 0,
  class: "left-right-struct-left-margin-part"
};
const _hoisted_2 = {
  key: 1,
  class: "left-right-struct-iconpart"
};
const _hoisted_3 = ["src"];
const _hoisted_4 = {
  key: 2,
  class: "left-right-struct-text-left-margin-part"
};
const _hoisted_5 = ["src"];
const _sfc_main = {
  __name: "cardtext",
  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");
    const title = toRef(props, "title");
    const subTitle = 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"
      }, [
        isLeftRightStruct.value ? (openBlock(), createElementBlock("div", {
          key: 0,
          style: normalizeStyle(leftRightStructStyle),
          class: "left-right-struct"
        }, [
          hasIconOrImage.value || alignLeft.value ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true),
          hasIconOrImage.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
            useImage.value ? (openBlock(), createElementBlock("img", {
              key: 0,
              src: imgUrl.value,
              class: "left-right-struct-iconpart-image"
            }, null, 8, _hoisted_3)) : createCommentVNode("", true)
          ])) : createCommentVNode("", true),
          hasIconOrImage.value ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("", true),
          createElementVNode("div", {
            style: normalizeStyle(leftRightStructTextAreaStyle)
          }, [
            createElementVNode("div", {
              style: normalizeStyle(leftRightStructTextMain),
              class: "title-main"
            }, toDisplayString(title.value), 5),
            createElementVNode("div", {
              style: normalizeStyle(leftRightStructTextSub),
              class: "title-sub"
            }, toDisplayString(subTitle.value), 5)
          ], 4)
        ], 4)) : createCommentVNode("", true),
        isUpDownStruct.value ? (openBlock(), createElementBlock("div", {
          key: 1,
          style: normalizeStyle(upDownStructStyle),
          class: "up-down-struct"
        }, [
          createElementVNode("div", {
            style: normalizeStyle(upDownStructIconPartStyle),
            class: "up-down-struct-iconpart"
          }, [
            useImage.value ? (openBlock(), createElementBlock("img", {
              key: 0,
              src: imgUrl.value,
              style: normalizeStyle(upDownStructIconImageStyle)
            }, null, 12, _hoisted_5)) : createCommentVNode("", true)
          ], 4),
          createElementVNode("div", {
            style: normalizeStyle(upDownStructGapStyle)
          }, null, 4),
          createElementVNode("div", {
            style: normalizeStyle(upDownStructTitleStyle),
            class: "title-main"
          }, toDisplayString(title.value), 5),
          createElementVNode("div", {
            style: normalizeStyle(upDownStructSubTitleStyle),
            class: "title-sub"
          }, toDisplayString(subTitle.value), 5)
        ], 4)) : createCommentVNode("", true)
      ], 4);
    };
  }
};
const TvCardText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c32727a2"]]);
export {
  TvCardText as default
};