pc--vr/src/components/IndexSection/index.vue

<script setup name="IndexSection">
// import { type } from "os";
import SvgIcon from "~/components/SvgIcon/index.vue";

import * as formatTime from "~/utils/formatTime";

const handleTimeAgo = formatTime.timeAgo;

const Props = defineProps({
  type: {
    type: String,
    validator: (key) => ["article", "common"].includes(key),
    default: "common",
  },
  // 没有图片的就是 `article` 类型
  image: String,
  title: String,
  timeAgo: String,
  descs: String,
  topicName: String,
  author: String,
  authorAvatar: {
    type: String,
    default: "", // TODO: 理应存在默认头像
  },
  view_count: String, //浏览量
  comment_count: String, //评论数
  like_count: String, //点赞数
  collect_count: String, //收藏数
  share_count: String, //分享数
});
const emit = defineEmits(["todetails"]);
const todetails = () => {
  emit("update");
};

const shareLink = () => {};
</script>

<template>
  <div class="index-section-container" @click="todetails">
    <div v-if="type === 'common'" class="imgbox">
      <img :src="image" style="width: 279px; height: 155px;object-fit: cover;" alt=""  />
    </div>
    <div v-else class="article-wrapper">
      <div class="title ellipsis-two">{{ title }}</div>
      <p class="desc">{{ descs }}</p>
    </div>

    <div class="content">
      <div v-if="type === 'common'" class="title ellipsis-two">
        {{ title }}
      </div>

      <!-- TODO: 话题是否必填   v-show="topicName" -->
      <div class="flag" :style="{ opacity: topicName ? '1' : '0' }">
        #{{ topicName }}
      </div>

      <div class="moment-user flex-row flex-aic flex-jc-sb">
        <div class="left flex-row flex-aic">
          <div class="avatar">
            <img :src="authorAvatar" :alt="author" />
          </div>
          <div class="nickname ellipsis">{{ author }}</div>
        </div>
        <div class="ago">{{ handleTimeAgo(timeAgo) }}</div>
      </div>

      <div class="footer">
        <ul class="flex-row flex-aic flex-jc-sb">
          <li class="active">
            <SvgIcon name="like" :size="16" :rgap="2" color="#00b0b0" />
            <span>{{ view_count || 0 }}</span>
          </li>
          <li class="active">
            <SvgIcon name="collect" :size="16" :rgap="2" color="#00b0b0" />
            <span>{{ comment_count || 0 }}</span>
          </li>
          <li>
            <SvgIcon name="message" :size="16" :rgap="2" color="#999999" />
            <span>{{ collect_count || 0 }}</span>
          </li>
          <li>
            <SvgIcon name="forward" :size="16" :rgap="2" color="#999999" />
            <span>{{ share_count || 0 }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index-section {
  &-container {
    width: 275px;
    height: 337px;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;

    .imgbox {
      width: 279px;
      height: 155px;
      background: #eee;
      border-radius: 6px 6px 0px 0px;
    }

    .article-wrapper {
      padding: 14px 10px 0;
      height: 201px;

      /* height: 187px; */
      .title {
        margin-bottom: 16px;
      }

      .desc {
        margin: 0;
        padding: 0;
        font-size: 14px;
        height: calc(100% - 60px);
        line-height: 1.44;
        overflow: hidden;
      }
    }

    .title {
      width: calc(279px - 20px);
      height: 44px;
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 22px;
      margin-bottom: 16px;
    }

    .content {
      padding: 16px 10px;

      .flag {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        font-weight: 400;
        color: #ff6700;
      }

      .moment-user {
        height: 30px;

        .left {
          width: 0;
          flex: 1;
        }

        .avatar {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          overflow: hidden;
        }

        .nickname {
          flex: 1;
          padding: 0 10px 0 8px;
          font-size: 12px;
          font-weight: 400;
          color: #444444;
        }

        .ago {
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #888888;
          line-height: 17px;
        }
      }

      .footer {
        height: 30px;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 30px;

        ul {
          padding: 0;
          margin: 0;
          list-style: none;

          li {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;

            &.active {
              color: #00b0b0;
            }
          }
        }
      }
    }
  }
}
</style>