<template>
  <div class="card">
    <div class="img">
      <img :src="item.url" alt="" />
    </div>
    <img class="status" src="@/assets/images/video-label1.gif" alt="" />
    <img class="status" src="@/assets/images/video-label2.png" alt="" />
    <img class="status" src="@/assets/images/video-label3.png" alt="" />
    <p class="text">{{ item.text }}</p>
    <div class="info">
      <div class="user">
        <img src="" alt="" srcset="" />
        <p>赵小六</p>
      </div>
      <span>154次观看</span>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

defineProps({
  item: {
    type: Object,
    default: () => {},
  },
});
</script>
<style scoped lang="scss">
.card {
  position: relative;
  margin-bottom: 24px;
  text-align: left;
  background: #000;
  border-radius: 16px;
  .status {
    position: absolute;
    left: 0;
    top: 0;
    width: 114px;
    height: 40px;
  }
  .img {
    position: relative;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    margin-bottom: 16px;
    img {
      width: 100%;
      height: 448px;
    }
    span {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 48px;
      flex-shrink: 0;
      color: #ffffff;
      font-family: "PingFang SC";
      font-size: 24px;
      font-style: normal;
      font-weight: 500;
      line-height: 48px;
      opacity: 0.8;
      text-align: left;
      padding-left: 16px;
      box-sizing: border-box;
      background: linear-gradient(
        180deg,
        #00000000 0%,
        #00000000 0.01%,
        #000000cc 84.13%
      );
    }
  }
  .text {
    color: #fff;
    text-align: justify;
    font-family: "PingFang SC";
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 44px;
    margin-bottom: 20px;
    padding: 0 16px;
  }
  .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.8);
    font-family: "PingFang SC";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    padding: 0 16px;
    padding-bottom: 20px;
    .user {
      display: flex;
      align-items: center;
      img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
  }
  .label {
    color: #8f5423;
    font-family: "PingFang SC";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    padding: 0px 6px;
    border-radius: 4px;
    background: linear-gradient(325deg, #fce6b2 4.41%, #fff1cf 91.95%);
    text-align: left;
  }
}
</style>
