parent
686832b883
commit
84288b56f3
@ -1,60 +1,72 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<!-- 卡片头部 -->
|
||||
<div slot="header" class="header">
|
||||
<!-- 标题 -->
|
||||
<span>{{title}}</span>
|
||||
<!-- 标签 -->
|
||||
<span>
|
||||
<el-tag size="small" :type="titleTag">{{titleUnit}}</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 主体内容 -->
|
||||
<div class="content">
|
||||
<!-- 主要内容 -->
|
||||
{{content}}
|
||||
<!-- 单位 -->
|
||||
<span class="unit">{{contentUnit}}</span>
|
||||
</div>
|
||||
<!-- 底部信息 -->
|
||||
<div class="bottom">
|
||||
<!-- 左侧标题 -->
|
||||
<span>{{bottomTitle}}</span>
|
||||
<!-- 右侧内容 -->
|
||||
<span>
|
||||
{{bottomContent}}
|
||||
<!-- 图标 -->
|
||||
<i :class="bottomIcon"></i>
|
||||
</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
"title",
|
||||
"titleTag",
|
||||
"titleUnit",
|
||||
"content",
|
||||
"contentUnit",
|
||||
"bottomTitle",
|
||||
"bottomContent",
|
||||
"bottomIcon"
|
||||
"title", // 标题
|
||||
"titleTag", // 标题标签类型
|
||||
"titleUnit", // 标题单位
|
||||
"content", // 主要内容
|
||||
"contentUnit", // 内容单位
|
||||
"bottomTitle", // 底部标题
|
||||
"bottomContent", // 底部内容
|
||||
"bottomIcon" // 底部图标类名
|
||||
]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
margin-right: 10px;
|
||||
margin-right: 10px; // 卡片之间的间距
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex; // 使用弹性布局
|
||||
justify-content: space-between; // 水平分布
|
||||
align-items: center; // 垂直居中
|
||||
}
|
||||
.content {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
font-size: 30px; // 主内容字体大小
|
||||
font-weight: bold; // 加粗
|
||||
color: #666; // 字体颜色
|
||||
text-align: center; // 文字居中
|
||||
.unit {
|
||||
font-size: 16px;
|
||||
font-size: 16px; // 单位字体大小
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
display: flex; // 使用弹性布局
|
||||
justify-content: space-between; // 水平分布
|
||||
align-items: center; // 垂直居中
|
||||
margin-top: 10px; // 上方间距
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,55 +1,68 @@
|
||||
<template>
|
||||
<div class="home-progress">
|
||||
<!-- 第一个标题 -->
|
||||
<div class="title">月访问量</div>
|
||||
<!-- 提示文字 -->
|
||||
<div class="tip">同上期增长</div>
|
||||
<!-- 进度条组件 -->
|
||||
<el-progress
|
||||
class="progress"
|
||||
:text-inside="true"
|
||||
:stroke-width="24"
|
||||
:percentage="20"
|
||||
status="success"
|
||||
:text-inside="true" // 将文字显示在进度条内部
|
||||
:stroke-width="24" // 进度条宽度
|
||||
:percentage="20" // 进度百分比
|
||||
status="success" // 状态为成功
|
||||
></el-progress>
|
||||
|
||||
<!-- 第二个标题 -->
|
||||
<div class="title">月用户量</div>
|
||||
<!-- 提示文字 -->
|
||||
<div class="tip">同上期增长</div>
|
||||
<!-- 进度条组件 -->
|
||||
<el-progress
|
||||
class="progress"
|
||||
:text-inside="true"
|
||||
:stroke-width="24"
|
||||
:percentage="50"
|
||||
status="success"
|
||||
:percentage="50" // 进度百分比
|
||||
status="success" // 状态为成功
|
||||
></el-progress>
|
||||
|
||||
<!-- 第三个标题 -->
|
||||
<div class="title">月收入</div>
|
||||
<!-- 提示文字 -->
|
||||
<div class="tip">同上期减少</div>
|
||||
<!-- 进度条组件 -->
|
||||
<el-progress
|
||||
class="progress"
|
||||
:text-inside="true"
|
||||
:stroke-width="24"
|
||||
:percentage="28"
|
||||
status="exception"
|
||||
:percentage="28" // 进度百分比
|
||||
status="exception" // 状态为异常
|
||||
></el-progress>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.home-progress {
|
||||
background: #ffffff;
|
||||
height: 400px;
|
||||
padding: 20px;
|
||||
background: #ffffff; // 背景颜色
|
||||
height: 400px; // 高度
|
||||
padding: 20px; // 内边距
|
||||
.title {
|
||||
color: #666666;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
color: #666666; // 文字颜色
|
||||
font-weight: bold; // 加粗
|
||||
font-size: 20px; // 字体大小
|
||||
margin-top: 10px; // 上方外边距
|
||||
}
|
||||
.tip {
|
||||
color: #888888;
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
color: #888888; // 文字颜色
|
||||
font-size: 16px; // 字体大小
|
||||
margin-top: 10px; // 上方外边距
|
||||
}
|
||||
.progress {
|
||||
margin-top: 10px;
|
||||
margin-top: 10px; // 上方外边距
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue