mingnan/src/pages/parts/Box2LineLargeImageUserShadow.vue

<template>
  <view 
    :class="'position-relative grid4-item d-flex flex-col shadow-l radius-l bg-base p-2 mb-2 overflow-hidden ' + classNames"
    @click="$emit('click')"
  >
    <image 
      v-if="image" 
      class="w-100 height-300 radius-base" 
      :src="image" 
      mode="aspectFill" 
    />
    <image 
      v-if="videoMark" 
      class="width-60 mr-2 video-mark" 
      :src="PlayVideo" mode="widthFix" 
    />
    <view v-if="userName" class="d-flex flex-row align-center mt-2">
      <image class="width-60 mr-2" :src="userHead" mode="widthFix" />
      <text class="size-s">{{ userName }}</text>
    </view>
    <text 
      :class="[
        `color-${titleColor}`,
        title1 || desc ? 'text-lines-1' : 'text-lines-2',
        'mt-2',
      ]"
    >
      {{ title }}
    </text>
    <text v-if="desc" class="color-second text-lines-2 mt-2">{{ desc }}</text>
    <view v-if="likes !== undefined && comment !== undefined" class="d-flex flex-row mt-2">
      <image class="width-40 mr-2" :src="IconHeart" mode="widthFix" />
      <text class="size-s mr-3">{{ likes }}</text>
      <image class="width-40 mr-2" :src="IconChat" mode="widthFix" />
      <text class="size-s">{{ comment }}</text>
    </view>
    <view v-if="bottomTime" class="d-flex flex-row mt-2">
      <image class="width-40 mr-2" :src="IconTime" mode="widthFix" />
      <text class="size-s mr-3">{{ bottomTime }}</text>
    </view>
    <view v-if="bottomLocate" class="d-flex flex-row justify-between mt-2">
      <view class="d-flex flex-row align-center">
        <image class="width-40 mr-2" :src="IconLocation" mode="widthFix" />
        <text class="size-s">{{ bottomLocate }}</text>
      </view>
      <view class="d-flex flex-row align-center">
        <image class="width-40 mr-2" :src="IconStar" mode="widthFix" />
        <text class="size-s">{{ bottomScore }}</text>
      </view>
    </view> 
  </view>
</template>

<script setup lang="ts">
import IconHeart from '/static/images/discover/IconHeart.png';
import IconChat from '/static/images/discover/IconChat.png';
import IconLocation from '/static/images/inhert/IconLocation.png';
import IconTime from '/static/images/inhert/IconTime.png';
import IconStar from '/static/images/inhert/IconStar.png';
import PlayVideo from '/static/images/inhert/PlayVideo.png';

defineProps({
  classNames: {
    type: String,
  },
  title: {
    type: String,
  },
  titleColor: {
    type: String,
    default: 'primary',
  },
  title1: {
    type: Boolean,
    default: false,
  },
  videoMark: {
    type: Boolean,
    default: false,
  },
  desc: {
    type: String,
  },
  image: {
    type: String,
  },
  likes: {
    type: Number,
  },
  comment: {
    type: Number,
  },
  userHead: {
    type: String,
  },
  userName: {
    type: String,
  },
  bottomLocate: {
    type: String,
  },
  bottomScore: {
    type: String,
  },
  bottomTime: {
    type: String,
  },
})
</script>

<style scoped>
.video-mark {
  position: absolute;
  left: calc(50% - 20rpx);
  top: 145rpx
}
</style>