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