<template>
  <div class="home-progress"> <!-- 定义组件的根容器 -->
    <div class="title">月访问量</div> <!-- 显示标题“月访问量” -->
    <div class="tip">同上期增长</div> <!-- 显示提示信息“同上期增长” -->
    <el-progress <!-- 使用 Element UI 的进度条组件 -->
      class="progress" <!-- 设置进度条的样式类 -->
      :text-inside="true" <!-- 将文字显示在进度条内部 -->
      :stroke-width="24" <!-- 设置进度条的宽度 -->
      :percentage="20" <!-- 设置进度百分比为 20% -->
      status="success" <!-- 设置进度条状态为成功（绿色） -->
    ></el-progress>
    <div class="title">月用户量</div> <!-- 显示标题“月用户量” -->
    <div class="tip">同上期增长</div> <!-- 显示提示信息“同上期增长” -->
    <el-progress <!-- 使用 Element UI 的进度条组件 -->
      class="progress" <!-- 设置进度条的样式类 -->
      :text-inside="true" <!-- 将文字显示在进度条内部 -->
      :stroke-width="24" <!-- 设置进度条的宽度 -->
      :percentage="50" <!-- 设置进度百分比为 50% -->
      status="success" <!-- 设置进度条状态为成功（绿色） -->
    ></el-progress>
    <div class="title">月收入</div> <!-- 显示标题“月收入” -->
    <div class="tip">同上期减少</div> <!-- 显示提示信息“同上期减少” -->
    <el-progress <!-- 使用 Element UI 的进度条组件 -->
      class="progress" <!-- 设置进度条的样式类 -->
      :text-inside="true" <!-- 将文字显示在进度条内部 -->
      :stroke-width="24" <!-- 设置进度条的宽度 -->
      :percentage="28" <!-- 设置进度百分比为 28% -->
      status="exception" <!-- 设置进度条状态为异常（红色） -->
    ></el-progress>
  </div>
</template>
<script>
export default {}; // 定义 Vue 组件，默认为空
</script>
<style lang="scss">
.home-progress {
  background: #ffffff; /* 设置背景颜色为白色 */
  height: 400px; /* 设置组件高度 */
  padding: 20px; /* 设置内边距 */
  .title {
    color: #666666; /* 设置标题文字颜色 */
    font-weight: bold; /* 设置字体加粗 */
    font-size: 20px; /* 设置字体大小 */
    margin-top: 10px; /* 设置顶部外边距 */
  }
  .tip {
    color: #888888; /* 设置提示文字颜色 */
    font-size: 16px; /* 设置字体大小 */
    margin-top: 10px; /* 设置顶部外边距 */
  }
  .progress {
    margin-top: 10px; /* 设置进度条顶部外边距 */
  }
}
</style>
