{"version":3,"file":"index-DpP1zu4K.js","sources":["../../src/components/TvbArticleCard/index.vue","../../src/views/Article/components/LazyComponent/index.vue"],"sourcesContent":["<script setup>\nimport { computed } from 'vue'\nimport { toReativeTime } from '@/utils'\n\nconst props = defineProps({\n  size: { type: String, default: null },\n  loading: { type: Boolean, default: false },\n  autoheight: { type: Boolean, default: false },\n  img: { type: [Object, String], default: null },\n  title: { type: String, default: '' },\n  subtitle: { type: String, default: '' },\n  date: { type: [String, Number], default: '' },\n  isVideo: { type: Boolean, default: false },\n  playIcon: {\n    type: Object,\n    default: () => {\n      return {}\n    }\n  },\n  link: {\n    type: Object,\n    default() {\n      return { url: '', rel: '', target: '' }\n    }\n  },\n  other: {\n    type: Object,\n    default() {\n      return {}\n    }\n  }\n})\ndefineEmits(['tracking'])\nconst isMobile = computed(() => ['s', 'xs'].includes(props.size))\nconst dateTime = computed(() => toReativeTime(props.date))\n</script>\n\n<template>\n  <div\n    class=\"tvb-article-card\"\n    :class=\"[size ? 'card-' + size : '', { 'card-autoheight': autoheight }]\"\n  >\n    <div v-if=\"loading\" class=\"tvb-article-card__skeleton tvb-hairline--surround\">\n      <div class=\"tvb-article-card__skeleton--image--wrap\">\n        <tvb-image\n          class=\"tvb-article-card__skeleton--cover\"\n          src=\"\"\n          backgroundc=\"#F0F1F2\"\n        ></tvb-image>\n      </div>\n      <div class=\"tvb-article-card__skeleton--info\">\n        <div class=\"tvb-article-card__skeleton--text\"></div>\n        <div\n          class=\"tvb-article-card__skeleton--text\"\n          style=\"width: 62.5%; margin-top: var(--ac-info-margin-top)\"\n        ></div>\n      </div>\n    </div>\n    <div v-else class=\"tvb-article-card__wrap tvb-hairline--surround\">\n      <tvb-router-link\n        :to=\"link.url\"\n        :linkRel=\"link.rel\"\n        :linkTarget=\"link.target\"\n        :class=\"{ 'disable-hover': isMobile }\"\n        @click=\"$emit('tracking')\"\n      >\n        <div class=\"tvb-article-card__image\">\n          <div class=\"tvb-article-card__image--wrap\">\n            <tvb-image\n              class=\"tvb-article-card__cover\"\n              :src=\"img\"\n              :alt=\"title\"\n              :isVideo=\"isVideo\"\n              :playIcon=\"playIcon\"\n              :transform=\"isMobile ? false : true\"\n              backgroundc=\"#F0F1F2\"\n            ></tvb-image>\n          </div>\n        </div>\n      </tvb-router-link>\n      <tvb-router-link\n        :to=\"link.url\"\n        :linkRel=\"link.rel\"\n        :linkTarget=\"link.target\"\n        class=\"disable-hover\"\n        @click=\"$emit('tracking')\"\n      >\n        <div class=\"tvb-article-card__info\">\n          <h3 class=\"clear-h tvb-article-card__info--tit\" :title=\"title\">\n            <tvb-router-link\n              :to=\"link.url\"\n              :linkRel=\"link.rel\"\n              :linkTarget=\"link.target\"\n              :class=\"{ 'disable-hover': isMobile }\"\n              @click=\"$emit('tracking')\"\n            >\n              {{ title }}\n            </tvb-router-link>\n          </h3>\n          <div v-if=\"subtitle || date\" class=\"tvb-article-card__info--bottom\">\n            <span class=\"tvb-article-card__info--author\" :title=\"subtitle\">{{ subtitle }}</span>\n            <span v-if=\"date\" class=\"tvb-article-card__info--date\">{{ dateTime }}</span>\n          </div>\n        </div>\n      </tvb-router-link>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.tvb-article-card {\n  --ac-bg-color: #f8f9fa;\n  // --ac-img-bg-color: #f0f1f2;\n  --ac-title-font-size: 18px;\n  --ac-title-line-height: 24px;\n  --ac-title-font-color: #333;\n  --ac-subtitle-font-size: 14px;\n  --ac-subtitle-line-height: 20px;\n  --ac-subtitle-font-color: #818d95;\n  --ac-info-margin-top: 10px;\n  --ac-info-padding: 0 16px 12px;\n  --ac-subtitle-margin-top: 4px;\n  --ac-cover-radio: 56.25%; // 如何计算值？ 9 / 16（高除以宽）\n  --ac-hover-color: #0062a3;\n  --ac-border-radius: 8px;\n  --ac-img-border-radius: 8px;\n  position: relative;\n\n  a {\n    text-decoration: none;\n    background-color: transparent;\n    color: inherit;\n    transition: color 0.15s linear;\n    cursor: pointer;\n    &:visited {\n      color: inherit;\n    }\n  }\n  a:not(.disable-hover):hover {\n    color: var(--ac-hover-color) !important;\n  }\n\n  .tvb-article-card__wrap {\n    background-color: var(--ac-bg-color);\n    border-radius: var(--ac-border-radius);\n    --tvb-hairline-border-radius: calc(2 * var(--ac-border-radius));\n  }\n  // img样式\n  .tvb-article-card__image {\n    position: relative;\n    // z-index: 1;\n    border-radius: var(--ac-img-border-radius);\n  }\n  .tvb-article-card__image--wrap {\n    padding-top: var(--ac-cover-radio);\n    border-radius: inherit;\n    background-color: var(--ac-img-bg-color);\n    cursor: pointer;\n  }\n  .tvb-article-card__cover {\n    position: absolute;\n    top: 0;\n    left: 0;\n    // z-index: 1;\n    width: 100%;\n    height: 100%;\n    border-radius: inherit;\n    overflow: hidden;\n    @include safari-overflow-hidden();\n  }\n\n  // 内容样式\n  .tvb-article-card__info {\n    margin-top: var(--ac-info-margin-top);\n    padding: var(--ac-info-padding);\n    min-height: calc(\n      var(--ac-title-line-height) * 2 + var(--ac-subtitle-line-height) +\n        var(--ac-subtitle-margin-top)\n    );\n\n    .tvb-article-card__info--tit {\n      color: var(--ac-title-font-color);\n      font-size: var(--ac-title-font-size);\n      line-height: var(--ac-title-line-height);\n      height: calc(2 * var(--ac-title-line-height));\n      letter-spacing: 0.5px;\n      word-break: break-all;\n      @include line-text-ellipsis(2);\n\n      & > a {\n        color: var(--ac-title-font-color);\n      }\n    }\n\n    .tvb-article-card__info--bottom {\n      margin-top: var(--ac-subtitle-margin-top);\n      color: var(--ac-subtitle-font-color);\n      font-size: var(--ac-subtitle-font-size);\n      display: flex;\n      align-items: center;\n      display: inline-flex;\n    }\n\n    .tvb-article-card__info--author {\n      flex: 1;\n      word-break: break-word;\n      line-height: var(--ac-subtitle-line-height);\n      @include line-text-ellipsis(1);\n    }\n\n    .tvb-article-card__info--date {\n      margin-left: 12px;\n      line-height: var(--ac-subtitle-line-height);\n    }\n  }\n\n  // 动态高度样式\n  &.card-autoheight {\n    .tvb-article-card__info {\n      min-height: auto;\n      .tvb-article-card__info--tit {\n        height: auto;\n      }\n    }\n  }\n\n  &.card-s,\n  &.card-xs {\n    --ac-title-font-size: 16px;\n    --ac-title-line-height: 22px;\n    --ac-subtitle-font-size: 13px;\n    --ac-subtitle-line-height: 18px;\n    --ac-info-margin-top: 8px;\n    --ac-info-padding: 0 10px 10px;\n    --ac-subtitle-margin-top: 4px;\n    --ac-cover-radio: 56.28415300546448%; // 如何计算值？ 9 / 16（高除以宽）\n    --ac-border-radius: 5px;\n    --ac-img-border-radius: 6px;\n  }\n\n  // 骨架屏样式\n  .tvb-article-card__skeleton {\n    background-color: var(--ac-bg-color);\n    border-radius: var(--ac-border-radius);\n    --tvb-hairline-border-radius: calc(2 * var(--ac-border-radius));\n    .tvb-article-card__skeleton--image--wrap {\n      position: relative;\n      padding-top: var(--ac-cover-radio);\n      border-radius: var(--ac-img-border-radius);\n      .tvb-article-card__skeleton--cover {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n        overflow: hidden;\n        @include safari-overflow-hidden();\n      }\n    }\n    .tvb-article-card__skeleton--info {\n      margin-top: var(--ac-info-margin-top);\n      padding: var(--ac-info-padding);\n      .tvb-article-card__skeleton--text {\n        height: 26px;\n        background-color: #f0f1f2;\n        border-radius: 4px;\n      }\n    }\n  }\n}\n</style>\n","<script setup>\nimport { ref, onBeforeUnmount } from 'vue'\nimport { useIntersectionObserver } from '@vueuse/core'\n\ndefineProps({\n  tag: { type: String, default: 'div' }\n})\n\nconst lazyRef = ref()\nconst visible = ref(false)\nconst { stop } = useIntersectionObserver(lazyRef, ([{ isIntersecting }]) => {\n  visible.value = isIntersecting\n  if (visible.value) stop()\n})\n\nonBeforeUnmount(() => stop())\n</script>\n\n<template>\n  <component :is=\"tag\" ref=\"lazyRef\">\n    <template v-if=\"visible\"><slot></slot></template>\n    <template v-else><slot name=\"loading\"></slot></template>\n  </component>\n</template>\n"],"names":["props","__props","isMobile","computed","dateTime","toReativeTime","lazyRef","ref","visible","stop","useIntersectionObserver","isIntersecting","onBeforeUnmount"],"mappings":"gjFAIA,MAAAA,EAAAC,EA6BAC,EAAAC,EAAA,IAAA,CAAA,IAAA,IAAA,EAAA,SAAAH,EAAA,IAAA,CAAA,EACAI,EAAAD,EAAA,IAAAE,EAAAL,EAAA,IAAA,CAAA,69CC1BA,MAAAM,EAAAC,EAAA,EACAC,EAAAD,EAAA,EAAA,EACA,CAAA,KAAAE,CAAA,EAAAC,EAAAJ,EAAA,CAAA,CAAA,CAAA,eAAAK,CAAA,CAAA,IAAA,CACAH,EAAA,MAAAG,EACAH,EAAA,OAAAC,EAAA,CACA,CAAA,EAEA,OAAAG,EAAA,IAAAH,EAAA,CAAA"}