|
@@ -7,7 +7,9 @@
|
|
|
:key="index"
|
|
:key="index"
|
|
|
:class="{ active: active >= index }"
|
|
:class="{ active: active >= index }"
|
|
|
>
|
|
>
|
|
|
- <p class="text">{{ item.taskTypeName }}</p>
|
|
|
|
|
|
|
+ <el-tooltip class="item" effect="dark" :content="item.taskTypeName" placement="top">
|
|
|
|
|
+ <p>{{ item.taskTypeName }}</p>
|
|
|
|
|
+ </el-tooltip>
|
|
|
<div
|
|
<div
|
|
|
class="progress-box"
|
|
class="progress-box"
|
|
|
:style="`backgroundImage:linear-gradient(to top, var(--color-primary), var(--color-primary) ${item.percent},#fff ${item.percent}, #fff);`"
|
|
:style="`backgroundImage:linear-gradient(to top, var(--color-primary), var(--color-primary) ${item.percent},#fff ${item.percent}, #fff);`"
|
|
@@ -66,10 +68,12 @@
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.progress-container {
|
|
.progress-container {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ overflow-x: auto;
|
|
|
ul {
|
|
ul {
|
|
|
list-style: none;
|
|
list-style: none;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- justify-content: space-around;
|
|
|
|
|
|
|
+ justify-content: flex-start;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
li {
|
|
li {
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -77,6 +81,7 @@
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
|
|
+ min-width: 110px;
|
|
|
&::after {
|
|
&::after {
|
|
|
content: '';
|
|
content: '';
|
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -101,6 +106,13 @@
|
|
|
border-color: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ .el-tooltip{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ white-space: nowrap; /* 不换行 */
|
|
|
|
|
+ overflow: hidden; /* 超出部分隐藏 */
|
|
|
|
|
+ text-overflow: ellipsis; /* 显示省略号 */
|
|
|
|
|
+ }
|
|
|
.num,
|
|
.num,
|
|
|
.text {
|
|
.text {
|
|
|
width: 100%;
|
|
width: 100%;
|