<template>
  <!-- 创建一个带有 "head-info" 类名的 div 容器，同时通过动态绑定 class 属性，根据组件传入的 center 属性值（布尔类型）来决定是否添加 "center" 类名，以此实现不同的样式布局效果 -->
  <div class="head-info" :class="center && 'center'">
    <!-- 使用双括号插值语法展示 title 属性的值，将其作为一个文本内容放在 span 元素内展示，该文本通常用于显示标题相关的信息 -->
    <span>{{ title }}</span>
    <!-- 同样使用双括号插值语法展示 content 属性的值，把它放置在 p 元素中展示，这里的内容大概率是主要的正文信息，字体等样式上会相对突出一些 -->
    <p>{{ content }}</p>
    <!-- 通过 v-if 指令根据 bordered 属性的值（布尔类型）来决定是否渲染 em 元素，如果 bordered 属性为 true，则渲染该元素，可能用于添加一些装饰性的分割线等样式效果，具体样式由后续的样式部分定义 -->
    <em v-if="bordered"/>
  </div>
</template>
<script>
export default {
  name: 'HeadInfo',
  props: {
    // 定义 title 属性，类型为字符串，意味着外部传入的值应该是字符串类型的数据，用于设置组件展示的标题内容，默认值为空字符串，如果外部没有传入该属性值，那么对应的标题展示部分就为空，不会显示具体文字内容。
    title: {
      type: String,
      default: ''
    },
    // 定义 content 属性，同样类型为字符串，用于传递组件要展示的正文内容相关信息，其默认值也是空字符串，当外部未传入时，对应位置不会显示具体内容。
    content: {
      type: String,
      default: ''
    },
    // 定义 bordered 属性，类型为布尔值，用于控制是否显示某个边界相关的样式元素（从模板中看是 em 元素，可能是分割线之类的样式效果），默认值为 false，即默认情况下不显示该边界样式元素，只有外部传入 true 时才会显示。
    bordered: {
      type: Boolean,
      default: false
    },
    // 定义 center 属性，类型为布尔值，用于决定组件内容是否居中显示，默认值为 true，表示默认情况下内容是居中布局的，若外部传入 false，则会采用默认的非居中样式布局（具体样式差异由样式部分代码决定）。
    center: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="less" scoped>
// 对类名为 "head-info" 的元素设置样式，以下是相关样式规则的定义。
.head-info {
  // 设置元素的定位方式为相对定位，方便后续其内部的绝对定位元素（如 em 元素）基于它进行位置定位，常用于实现一些特殊的布局效果。
  position: relative;
  // 设置文本水平对齐方式为左对齐，这是默认的文本对齐方式，不过根据是否添加 "center" 类名（由组件传入的 center 属性决定），文本对齐方式会有所改变，后续有相应的样式覆盖规则。
  text-align: left;
  // 设置元素的内边距，右侧内边距为 32px，顶部和底部内边距为 0，用于在元素内部留出一定空间，使内部文字等内容不会紧贴边界，同时右侧留出相对更多空间可能有特定的布局或美观考量。
  padding: 0 32px 0 0;
  // 设置元素的最小宽度为 125px，确保元素在页面布局中不会因为内容较少等原因变得过窄，维持一定的视觉宽度效果。
  min-width: 125px;

  // 当元素同时具有 "center" 类名时（通过组件传入的 center 属性为 true 时添加该类名），应用以下样式规则，用于改变文本对齐方式以及内边距等样式，实现居中布局效果。
  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    // 设置 span 元素内文字的颜色，使用 rgba 颜色模式，透明度为 0.45 的黑色，使其呈现出相对较淡的颜色效果，通常用于次要信息或者标题等的文字颜色设置，视觉上有一定的区分度。
    color: rgba(0, 0, 0,.45);
    // 将 span 元素设置为内联块级元素，使其既可以像内联元素一样在一行内排列，又能像块级元素一样设置宽高、内外边距等样式属性，方便进行布局和样式调整。
    display: inline-block;
    // 设置 span 元素内文字的字体大小为 14px，符合一般标题或者较小文字内容的字号大小需求。
    font-size: 14px;
    // 设置 span 元素的行高为 22px，用于控制文字在垂直方向上的间距，保证文字有合适的展示效果，避免过于紧凑或稀疏。
    line-height: 22px;
    // 设置 span 元素底部的外边距为 4px，用于与下方元素（如 p 元素）隔开一定距离，在视觉上有一定的间隔效果，使布局更清晰。
    margin-bottom: 4px;
  }
  p {
    // 设置 p 元素内文字的颜色为透明度为 0.85 的黑色，相较于 span 元素内的文字颜色，更加深一些，通常用于突出显示主要内容的文字，视觉上更醒目。
    color: rgba(0, 0, 0,.85);
    // 设置 p 元素内文字的字体大小为 24px，相对较大的字号用于强调正文主要内容，使其在视觉上更突出，容易被关注到。
    font-size: 24px;
    // 设置 p 元素的行高为 32px，保证正文文字在垂直方向上有合适的间距，展示效果更好。
    line-height: 32px;
    // 设置 p 元素的上下外边距为 0，使其与上下方元素紧密贴合，一般正文内容不需要额外的上下间距，保持整体布局的紧凑性和连贯性。
    margin: 0;
  }
  em {
    // 设置 em 元素的背景颜色为 #e8e8e8，这是一种较浅的灰色，通常用于作为装饰性的分割线等背景颜色，视觉上比较柔和，起到一定的区分作用。
    background-color: #e8e8e8;
    // 设置 em 元素的定位方式为绝对定位，基于前面设置的父元素（.head-info）的相对定位，它可以精确地定位在特定位置，常用于实现一些脱离文档流的装饰性元素布局。
    position: absolute;
    // 设置 em 元素的高度为 56px，确定其垂直方向上的长度，符合分割线等装饰元素在视觉上的长度需求。
    height: 56px;
    // 设置 em 元素的宽度为 1px，使其呈现出较细的线条效果，用于模拟分割线等样式。
    width: 1px;
    // 设置 em 元素的顶部位置为 0，使其顶部与父元素（.head-info）的顶部对齐，保证在垂直方向上处于合适的起始位置。
    top: 0;
    // 设置 em 元素的右侧位置为 0，使其靠右对齐在父元素（.head-info）的右侧边界，符合分割线位于右侧的常见布局需求。
    right: 0;
  }
}
</style>