html
复制代码
<template>
<div class="article-ranking">
<div class="header">
<h2 class="title">{{ title }}</h2>
</div>
<div class="ranking-list">
<div v-for="(article, index) in articles" :key="index" class="article-item">
<div class="article-info">
<h3 class="article-title">{{ truncateTitle(article.title, 25) }}</h3>
<p class="article-content">{{ truncateContent(article.summary, 50) }}</p>
<div class="details">
<div class="info-row">
<p class="info-text">
时间: <span class="time">{{ formatPublishTime(article.createTime) }}</span> |
浏览量: <span class="count">{{ formatViews(article.likeCount).formattedValue }}</span>
<!-- -->
</p>
</div>
</div>
</div>
<div class="divider"></div> <!-- 分隔线 -->
</div>
</div>
<div class="footer">
<a @click="viewFullRanking" href="#" class="full-ranking-link">查看完整榜单</a>
</div>
</div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps(['title', 'articles']);
const viewFullRanking = () => {
console.log('View Full Ranking');
};
const truncateContent = (content, maxLength) => {
return content.length > maxLength ? content.substring(0, maxLength) + '...' : content;
};
const truncateTitle = (title, maxLength) => {
return title.length > maxLength ? title.substring(0, maxLength) + '...' : title;
};
const formatPublishTime = (publishTime) => {
const currentDate = new Date();
const articleDate = new Date(publishTime);
const timeDiff = currentDate - articleDate;
const oneDay = 24 * 60 * 60 * 1000;
const oneMonth = oneDay * 30;
if (timeDiff < oneDay) {
const hours = Math.floor(timeDiff / (60 * 60 * 1000));
return `${hours}小时前`;
} else if (timeDiff < oneMonth) {
const days = Math.floor(timeDiff / oneDay);
return `${days}天前`;
} else {
const months = Math.floor(timeDiff / oneMonth);
return `${months}个月前`;
}
};
const formatAbbreviation = (value) => {
if (value >= 10000) {
return {
formattedValue: Math.floor(value / 1000) + 'w+',
isLargeCount: true,
};
} else {
return {
formattedValue: value,
isLargeCount: false,
};
}
};
const formatViews = (views) => formatAbbreviation(views);
const formatLikes = (likes) => formatAbbreviation(likes);
</script>
<style scoped>
.article-ranking {
width: 300px;
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 16px;
font-family: 'Arial', sans-serif;
}
.article-title {
font-size: 18px;
margin-bottom: 8px;
color: #333;
text-align: left; /* Align article title to the left */
}
.article-content {
font-size: 14px;
color: #777;
margin-bottom: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left; /* Align article content to the left */
}
.ranking-list {
display: flex;
flex-direction: column;
}
.article-item {
padding: 8px;
}
.article-info {
display: flex;
flex-direction: column;
}
.details {
flex-grow: 1;
}
.info-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.time {
font-weight: bold;
color: #1890ff;
}
.count {
font-weight: bold;
color: #1890ff;
}
.large-count {
font-size: 12px; /* 调整较大计数的字体大小 */
}
.divider {
height: 1px;
background-color: #ddd;
margin: 8px 0;
}
.footer {
text-align: center;
margin-top: 16px;
}
.full-ranking-link {
font-size: 14px;
color: #1890ff;
text-decoration: none;
}
.full-ranking-link:hover {
text-decoration: underline;
}
</style>