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

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

@@ -61,4 +61,20 @@ body {
color: rgba(255, 185, 109, 1); color: rgba(255, 185, 109, 1);
} }
//标签tag样式----------------------------------------------------------------- //标签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; border-radius: 8px;
color: rgba(51, 51, 51, 1); color: rgba(51, 51, 51, 1);
display: flex; display: flex;
padding-bottom: 20px;
.left { .left {
margin-left: 48px; margin-left: 48px;
flex: 1; flex: 1;

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

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

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

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

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

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