hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-11 03:46:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

style:修改进度条样式

Browse Source
This commit is contained in:
李晓鸽
2022-09-26 15:40:44 +08:00
parent 5cbb50f68e
commit c2f02a33e5
5 changed files with 92 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/scss/common.scss
View File

@@ -62,3 +62,19 @@ body {
}
//标签tag样式-----------------------------------------------------------------
//进度条样式
.progress10{
background-color:rgba(238, 112, 108, 1) !important;
}
.progress30{
background-color:rgba(255, 151, 38, 1) !important;
}
.progress50{
background-color:rgba(39, 122, 255, 1) !important;
}
.progress80{
background-color:rgba(59, 94, 251, 1) !important;
}
.progress100{
background-color:rgba(57, 219, 183, 1) !important;
}

1
src/views/ballot/BallotPage.vue
View File

@@ -221,6 +221,7 @@ export default {
border-radius: 8px;
color: rgba(51, 51, 51, 1);
display: flex;
padding-bottom: 20px;
.left {
margin-left: 48px;
flex: 1;

9
src/views/discuss/DiscussPage.vue
View File

@@ -205,11 +205,11 @@ export default {
display: flex;
margin: 47px 45px 0 75px;
max-width: 1810px;
height: 50px;
// height: 50px;
background: #f9f9f9;
position: relative;
.linetitle {
margin: 14px 0 17px 28px;
margin: 14px 120px 17px 28px;
font-size: 16px;
font-weight: 800;
color: #333333;
@@ -263,6 +263,7 @@ export default {
font-size: 16px;
font-weight: 500;
color: #333333;
margin-right: 88px;
}
.itemdiscuss {
margin-top: 15px;
@@ -300,7 +301,9 @@ export default {
}
}
.thinline {
max-width: 1450px;
// max-width: 1450px;
width: calc(100% - 88px);
margin-top: 33px;
border-top: 1px solid #999999;
opacity: 0.2;

2
src/views/discussdetail/DiscussDetail.vue
View File

@@ -487,7 +487,7 @@ export default {
}
.thinline {
margin-top: 26px;
width: 1635px;
// width: 1635px;
border-top: 1px solid #878b92;
margin-left: -50px;
opacity: 0.2;

82
src/views/roadmap/PathDetails.vue
View File

@@ -70,15 +70,15 @@
:show-text="false"
:stroke-width="8"
:color="
value.progress < 20
value.progress <= 10
? 'rgba(238, 112, 108, 1)'
: value.progress < 30
: value.progress <= 30
? 'rgba(255, 151, 38, 1)'
: value.progress < 50
: value.progress <= 50
? 'rgba(39, 122, 255, 1)'
: value.progress < 100
: value.progress <= 80
? 'rgba(59, 94, 251, 1)'
: value.progress === 100
: value.progress <= 100
? 'rgba(57, 219, 183, 1)'
: ''
"
@@ -93,15 +93,15 @@
"
:style="{
color:
value.progress < 20
value.progress <= 10
? 'rgba(238, 112, 108, 1)'
: value.progress < 30
: value.progress <= 30
? 'rgba(255, 151, 38, 1)'
: value.progress < 50
: value.progress <= 50
? 'rgba(39, 122, 255, 1)'
: value.progress < 100
: value.progress <= 100
? 'rgba(59, 94, 251, 1)'
: value.progress === 100
: value.progress <= 100
? 'rgba(57, 219, 183, 1)'
: '',
}"
@@ -227,7 +227,19 @@
percentage="32"
:show-text="false"
:stroke-width="8"
color="rgba(39, 122, 255, 1)"
:color="
totalprogress <= 10
? 'rgba(238, 112, 108, 1)'
: totalprogress <= 30
? 'rgba(255, 151, 38, 1)'
: totalprogress <= 50
? 'rgba(39, 122, 255, 1)'
: totalprogress <= 80
? 'rgba(59, 94, 251, 1)'
: totalprogress <= 100
? 'rgba(57, 219, 183, 1)'
: ''
"
/>
</div>
<div
@@ -236,8 +248,21 @@
font-weight: 500;
color: #277aff;
margin-left: 10px;
color: rgba(39, 122, 255, 1);
"
:style="{
color:
totalprogress <= 10
? 'rgba(238, 112, 108, 1)'
: totalprogress <= 30
? 'rgba(255, 151, 38, 1)'
: totalprogress <= 50
? 'rgba(39, 122, 255, 1)'
: totalprogress <= 100
? 'rgba(59, 94, 251, 1)'
: totalprogress <= 100
? 'rgba(57, 219, 183, 1)'
: '',
}"
>
32%
</div>
@@ -253,7 +278,19 @@
percentage="10"
:show-text="false"
:stroke-width="8"
color="rgba(238, 112, 108, 1)"
:color="
compulsoryprogress <= 10
? 'rgba(238, 112, 108, 1)'
: compulsoryprogress <= 30
? 'rgba(255, 151, 38, 1)'
: compulsoryprogress <= 50
? 'rgba(39, 122, 255, 1)'
: compulsoryprogress <= 80
? 'rgba(59, 94, 251, 1)'
: compulsoryprogress <= 100
? 'rgba(57, 219, 183, 1)'
: ''
"
/>
</div>
<div
@@ -262,8 +299,21 @@
font-weight: 500;
color: #277aff;
margin-left: 10px;
color: rgba(238, 112, 108, 1);
"
:style="{
color:
compulsoryprogress <= 10
? 'rgba(238, 112, 108, 1)'
: compulsoryprogress <= 30
? 'rgba(255, 151, 38, 1)'
: compulsoryprogress <= 50
? 'rgba(39, 122, 255, 1)'
: compulsoryprogress <= 100
? 'rgba(59, 94, 251, 1)'
: compulsoryprogress <= 100
? 'rgba(57, 219, 183, 1)'
: '',
}"
>
10%
</div>
@@ -312,7 +362,7 @@ export default {
name: "#前沿趋势",
},
],
progress: 48,
progress: 90,
},
{
id: 1,
@@ -467,6 +517,8 @@ export default {
],
},
],
totalprogress: 30, //总进度
compulsoryprogress: 10, //必修进度
});
const handleClick = (tab, event) => {
console.log(tab, event);