MobilePolice/src/views/Mine/DynamicItem.vue

<template>
  <div>
    <!-- 动态内容项容器 -->
    <div class="dynamic-item">
      <!-- 动态标题 -->
      <div class="dynamic-title">同心同梦·护航亚东</div>

      <!-- 动态图片展示区域 -->
      <div class="dynamic-image">
        <!-- 图片预览功能（已注释） -->
        <!-- <van-image
          width="100%"
          height="200"
          fit="cover"
          src="https://img.zcool.cn/community/01a3865d25cdcda801216e8df41b8e.jpg"
          @click="previewImages(['https://img.zcool.cn/community/01a3865d25cdcda801216e8df41b8e.jpg'])"
        /> -->

        <!-- 图片网格展示 -->
        <van-grid :gutter="10">
          <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
        </van-grid>
      </div>

      <!-- 动态交互按钮区域 -->
      <div class="dynamic-actions">
        <!-- 点赞按钮 -->
        <div class="like-btn">
          <img :src="getIconUrl('btn_zan_gray_16')" alt="" class="content-icon" />
          <span>2</span>
        </div>

        <!-- 评论按钮 -->
        <div class="comment-btn">
          <img :src="getIconUrl('btn_comment_gray_16')" alt="" class="content-icon" />
          <span>2</span>
        </div>

        <!-- 分享按钮 -->
        <div class="share-btn">
          <img :src="getIconUrl('btn_share_gray_16')" alt="" class="content-icon" />
        </div>
      </div>

      <!-- 评论区域 -->
      <div class="dynamic-comments">
        <div class="comment">
          <!-- 点赞用户列表 -->
          <div class="rank">
            <img :src="getIconUrl('btn_zan_line_16')" alt="" />
            <span class="rank-names">张三、李四</span>
          </div>

          <!-- 评论内容项 -->
          <div class="comment-item">
            <span class="name">王五：</span>
            <span class="text">123123123</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  /**
   * 动态内容项组件
   *
   * 用于展示单条动态信息，包括标题、图片、点赞、评论等功能
   *
   * @component DynamicItem
   */

  // 图片预览功能（已注释）
  // import { showImagePreview } from 'vant'

  // 引入图标URL获取工具函数
  import { getIconUrl } from '@/utils/utils'

  /**
   * 图片预览功能（已注释）
   * @param {Array} images - 要预览的图片URL数组
   */
  // const previewImages = images => {
  //   showImagePreview({
  //     images: images
  //   })
  // }
</script>

<style lang="scss" scoped>
  // 动态内容项容器样式
  .dynamic-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    // 动态标题样式
    .dynamic-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
    }

    // 动态图片区域样式
    .dynamic-image {
      margin-bottom: 10px;
      border-radius: 8px;
      overflow: hidden;
    }

    // 动态交互按钮区域样式
    .dynamic-actions {
      display: flex;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 10px;

      // 点赞、评论、分享按钮共用样式
      .like-btn,
      .comment-btn,
      .share-btn {
        display: flex;
        align-items: center;
        margin-right: 20px;
        color: #666;

        // 按钮内文字样式
        span {
          margin-left: 5px;
          font-size: 14px;
        }
      }
    }

    // 评论区域样式
    .dynamic-comments {
      background-color: #f8f8f8;
      border-radius: 8px;

      // 单条评论样式
      .comment {
        border-radius: 4px;
        box-sizing: border-box;
        padding: 8px;

        // 点赞用户列表样式
        .rank {
          display: flex;

          // 点赞图标样式
          img {
            width: 16px;
            height: 16px;
            text-align: center;
          }

          // 点赞用户名称样式
          .rank-names {
            color: #5c80ca;
            font-size: 12px;
            font-weight: 500;
            margin-left: 5px;
          }
        }

        // 评论内容项样式
        .comment-item {
          display: flex;
          margin-top: 5px;

          // 评论用户名称样式
          .name {
            font-size: 12px;
            color: #5c80ca;
            white-space: nowrap;
            font-weight: 500;
          }

          // 评论文本内容样式
          .text {
            font-size: 12px;
            color: #000;
            font-weight: 500;
            word-break: break-all; // 添加此行，允许在任意字符间换行
            word-wrap: break-word; // 添加此行，允许长单词换行
          }
        }
      }
    }
  }
</style>