/* 定义新闻详情页的整体样式 */
.news-detail {
  /* 设置内边距（padding），20rpx表示在各个方向上都留出20个相对像素的空间 */
  padding: 20rpx;
  /* 新闻标题的样式 */
  .news-detail-title {
    /* 设置字体大小为32rpx */
    font-size: 32rpx;
    /* 设置字体加粗 */
    font-weight: bold;
    /* 设置行高为50rpx，确保文本有适当的间距 */
    line-height: 50rpx;
    /* 设置内边距，使标题与容器边缘有一定的距离 */
    padding: 20rpx;
  }
  /* 新闻正文内容的样式 */
  .news-detail-text {
    /* 设置字体大小为28rpx */
    font-size: 28rpx;
    /* 设置行高为46rpx，以保证阅读的舒适性 */
    line-height: 46rpx;
    /* 设置文本对齐方式为两端对齐 */
    text-align: justify;
    /* 对于中文字符，使用inter-ideograph来调整字符间距，使文本更美观 */
    text-justify: inter-ideograph;
    /* 设置上边距，使得正文与前一个元素之间有足够的空间 */
    margin-top: 20rpx;
  }
}

/* 内容区域的样式 */
.content {
  /* 使用 :deep 伪类选择器穿透到子组件中的 img 标签 */
  :deep(img) {
    /* 确保图片作为块级元素显示，占据其父容器的全部宽度 */
    display: block;
    /* 图片宽度设置为100%，使其适应父容器的宽度 */
    width: 100%;
    /* 保持图片的宽高比例不变，高度自动调整 */
    height: auto;
  }
}
