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