基于VUE3的简洁界面文章排行榜设计与实现

    <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 clas