<template> <a class="box flexflex" target="_blank" :href="`./details/${item['uniqid']}`"> <img class="img" :src="item['schoolimage']" /> <div class="content flexflex"> <div class="name">{{ item["school"] }}</div> <div class="list flexflex"> <div class="item flexacenter" v-if="item['profession']"> <div class="item-name">专业</div> <div class="item-value ellipsis">{{ item["profession"] }}</div> </div> <div class="item flexacenter" v-if="item['project']"> <div class="item-name">项目</div> <div class="item-value ellipsis">{{ item["project"] }}</div> </div> <div class="item flexacenter" v-if="item['interviewtime']"> <div class="item-name">时间</div> <div class="item-value ellipsis">{{ item["interviewtime"] }}</div> </div> </div> <div class="text-box"> <div class="text">{{ item["message"] }}</div> <div class="time flexacenter"> <img class="time-icon time-black-icon" src="@/assets/img/time-icon.svg" /> <img class="time-icon time-white-icon" src="@/assets/img/time-white-icon.svg" /> {{ handleDate(item["releasetime"]) }}发布 </div> </div> <div class="data-list flexacenter"> <div class="data-item flexacenter"> <img class="data-item-icon" src="@/assets/img/eye-icon.svg" /> {{ formatNumberWithCommas(item["views"] || 0) }} </div> <div class="data-item flexacenter" @click.prevent="handleLike(item['uniqid'], item['token'], item['islike'])"> <img class="data-item-icon" v-if="item['islike'] == 0" src="@/assets/img/like-no.svg" /> <img class="data-item-icon" v-else src="@/assets/img/like-yes.png" /> {{ item["likenum"] || 0 }} <!-- <img class="data-item-icon" src="@/assets/img/expression-icon.svg" /> {{ item["ripostes"] || 0 }} --> </div> <div class="data-item flexacenter"> <img class="data-item-icon" src="@/assets/img/comment-icon.svg" /> {{ item["commentnum"] || 0 }} </div> </div> </div> </a> </template> <script setup> let props = defineProps({ item: Object, }) import { ElMessage } from "element-plus" const emit = defineEmits(["childEvent"]) // 处理点赞 const handleLike = (uniqid, token, islike) => { if (islike == 1) { ElMessage.error("不可取消点赞") return } emit("handleLike", token) } // 将浏览量换算为k const formatNumberWithCommas = number => { // number = 1000000 return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); if (number >= 1000) { const units = ["K", "M", "B", "T"] const unitIndex = Math.floor(Math.log10(number) / 3) const unitName = units[unitIndex - 1] const formattedNumber = (number / Math.pow(1000, unitIndex)).toFixed(2) const decimalPart = formattedNumber.split(".")[1] if (decimalPart === "00") { return formattedNumber.split(".")[0] + unitName } else { return formattedNumber + unitName } } else { return number.toString() } } </script> <style lang="less" scoped> .box { width: 385px; // height: 278px; background-color: rgb(255, 255, 255); border-radius: 8px; padding: 20px 19px 25px 20px; cursor: pointer; margin-bottom: 20px; &:hover { .content { .text-box { background: rgba(114, 219, 134, 1); .text { color: #fff; } .time { color: #fff; .time-icon { &.time-black-icon { display: none; } &.time-white-icon { display: block; } } } } } } .img { width: 26px; height: 26px; margin-right: 10px; } .content { flex-direction: column; .name { font-weight: 650; font-size: 16px; color: #000000; margin-top: 2px; margin-bottom: 16px; } .list { flex-direction: column; margin-bottom: 14px; .item { &:not(:last-of-type) { margin-bottom: 8px; } .item-name { color: #7f7f7f; line-height: 20px; font-size: 13px; margin-right: 12.5px; } .item-value { font-size: 14px; color: #333333; width: 255px; } } } .text-box { // width: 304px; border-radius: 10px; background: #f2f2f2; border: 1px solid #f6f6f6; padding: 12px; margin-bottom: 11px; transition: all 0.3s; // &:hover { // background: rgba(114, 219, 134, 1); // .text { // color: #fff; // } // .time { // color: #fff; // .time-icon { // &.time-black-icon { // display: none; // } // &.time-white-icon { // display: block; // } // } // } // } .text { line-height: 24px; font-size: 13px; color: #333333; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .time { color: #aaaaaa; font-size: 13px; .time-icon { width: 20px; height: 20px; margin-right: 6px; &.time-black-icon { display: block; } &.time-white-icon { display: none; } } } } .data-list { justify-content: flex-end; color: #aaaaaa; font-size: 12px; .data-item { margin-left: 26px; .data-item-icon { width: 13px; margin-right: 5px; } } } } } </style>