修改榜单样式

This commit is contained in:
zhangyc
2022-10-24 11:59:12 +08:00
parent 2bf14b34ff
commit 1086339e4d

View File

@@ -50,13 +50,14 @@
<div class="scorelist"> <div class="scorelist">
<div class="grouprightscore"> <div class="grouprightscore">
<div class="sbutton" @click="stuValue = !stuValue"> <div class="sbutton" @click="stuValue = !stuValue">
<div class="wh" :class="stuValue ? 'sImage0' : 'sImage'"></div> <img v-if=stuValue src="../../assets/images/taskpage/stu0.png"/>
<img v-else src="../../assets/images/taskpage/stu.png"/>
<div :class="stuValue ? '' : 'btn1'">学员积分榜</div> <div :class="stuValue ? '' : 'btn1'">学员积分榜</div>
</div> </div>
<div class="sbutton" @click="stuValue = !stuValue"> <div class="sbutton" @click="stuValue = !stuValue">
<div class="wh" :class="stuValue ? 'group' : 'group0'"></div>
<img v-if=stuValue src="../../assets/images/taskpage/group.png"/>
<img v-else src="../../assets/images/taskpage/group0.png"/>
<div :class="stuValue ? 'btn1' : ''">小组积分榜</div> <div :class="stuValue ? 'btn1' : ''">小组积分榜</div>
</div> </div>
</div> </div>
@@ -318,6 +319,7 @@ export default {
todayvalue: "1", todayvalue: "1",
tableDataTotal: 30, tableDataTotal: 30,
stuValue: false, stuValue: false,
}); });
return { return {
...toRefs(state), ...toRefs(state),
@@ -325,9 +327,10 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.content3 { .content3 {
margin-top: 20px; margin-top: 20px;
.group { .group {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -343,15 +346,52 @@ export default {
font-size: 14px; font-size: 14px;
} }
} }
.groupright {
display: flex;
.btn1 {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
border: 1px solid #409eff;
border-radius: 8px;
background: #409eff;
cursor: pointer;
.btn1text {
color: #ffffff;
margin-left: 5px;
font-size: 14px;
}
}
.btn2 {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 32px;
border: 1px solid #409eff;
border-radius: 8px;
cursor: pointer;
background: #ffffff;
.btn2text {
color: #409eff;
margin-left: 5px;
font-size: 14px;
}
}
}
} }
.scorelist { .scorelist {
padding-left: 382px; padding-left: 20%;
padding-right: 382px; padding-right: 20%20%;
padding-bottom: 100px; padding-bottom: 100px;
padding-top: 50px; padding-top: 50px;
.grouprightscore { .grouprightscore {
display: flex; display: flex;
justify-content: space-evenly; justify-content: center;
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
.sbutton { .sbutton {
@@ -359,23 +399,10 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: 10%;
margin-right: 10%;
} }
.wh {
width: 40px;
height: 40px;
}
.sImage0 {
background-image: url(@/assets/images/taskpage/stu0.png);
}
.sImage {
background-image: url(@/assets/images/taskpage/stu.png);
}
.group0 {
background-image: url(@/assets/images/taskpage/group0.png);
}
.group {
background-image: url(@/assets/images/taskpage/group.png);
}
.btn1 { .btn1 {
color: #409eff; color: #409eff;
} }