hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-13 04:46:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增页面u币规则

Browse Source
This commit is contained in:
lmj
2022-10-17 16:47:02 +08:00
parent 01567b3d78
commit 597f5d1917
3 changed files with 229 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/data/pages.js
View File

@@ -84,6 +84,7 @@ export const pages=[
{title:'课程开发教程',path:'developtoolsdown',component:'tools/DeveloptoolsDown',hidden:true},
{title:'我的U币',path:'ucurrency',component:'ucurrency/Index',hidden:true},
{title:'我的勋章',path:'medal',component:'medal/Index',hidden:true},
{title:'勋章规则',path:'urules',component:'medal/urules',hidden:true},
{title:'排行榜',path:'ranking',component:'user/ranking',hidden:true}
]},
{title:'消息中心',path:'/message/center',hidden:false,children:[

3
src/views/medal/Index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="medal-box">
<h6 class="medal-title">我的勋章 <span class="text">勋章规则 ></span> </h6>
<h6 class="medal-title">我的勋章 <span class="text"> <a href="../medal/urules.vue">勋章规则 > </a></span> </h6>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="全部勋章" name="first"></el-tab-pane>
<el-tab-pane label="学习勋章" name="second"></el-tab-pane>
@@ -107,6 +107,7 @@
this.getConfig();
},
methods:{
getConfig() {// 获取勋章配置
apiStat.userMedalConfig().then(res=>{
if(res.status == 200) {

226
src/views/medal/urules.vue Normal file
View File

@@ -0,0 +1,226 @@
<template>
<div class="rulesbox">
<div class="title">
<div class="exp-hear-text">
勋章规则
<span class="exp-hear-textbor"></span>
</div>
</div>
<div class="rules-content">
<div class="table-hear">
<div class="grade">勋章等级</div>
<div class="tabletime"><span>跬步千里</span></div>
<div class="tabledata"><span>持之以恒</span></div>
<div class="tabledata"><span>知识贡献者</span></div>
<div class="tabletime"><span>社交达人</span></div>
</div>
<div class="table-content">
<div style="line-height: 58px;" class="grade">LV.1</div>
<div class="cont-left">累计学习 <span>1</span> h</div>
<div class="cont-right">连续 <span>1</span> 天活跃且学习时长 >=10分钟 </div>
<div class="cont-right">累计上传 <span>1</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
<div class="cont-left">累计被赞 <span>10</span> 次 </div>
</div>
<div class="table-content">
<div style="line-height: 58px;" class="grade">LV.2</div>
<div class="cont-left">累计学习 <span>5</span> h</div>
<div class="cont-right">连续 <span>5</span> 天活跃且学习时长 >=10分钟 </div>
<div class="cont-right">累计上传 <span>5</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
<div class="cont-left">累计被赞 <span>30</span> 次 </div>
</div>
<div class="table-content">
<div style="line-height: 58px;" class="grade">LV.3</div>
<div class="cont-left">累计学习 <span>10</span> h</div>
<div class="cont-right">连续 <span>15</span> 天活跃且学习时长 >=10分钟 </div>
<div class="cont-right">累计上传 <span>10</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
<div class="cont-left">累计被赞 <span>50</span> 次 </div>
</div>
<div class="table-content">
<div style="line-height: 58px;" class="grade">LV.4</div>
<div class="cont-left">累计学习 <span>50</span> h</div>
<div class="cont-right">连续 <span>30</span> 天活跃且学习时长 >=10分钟 </div>
<div class="cont-right">累计上传 <span>20</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
<div class="cont-left">累计被赞 <span>100</span> 次 </div>
</div>
<div class="table-content">
<div style="line-height: 58px;" class="grade">LV.5</div>
<div class="cont-left">累计学习 <span>100</span> h</div>
<div class="cont-right">连续 <span>70</span> 天活跃且学习时长 >=10分钟 </div>
<div class="cont-right">累计上传 <span>50</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
<div class="cont-left">累计被赞 <span>200</span> 次 </div>
</div>
<div class="table-content">
<div style="line-height: 58px;" class="grade">LV.6</div>
<div class="cont-left">累计学习 <span>300</span> h</div>
<div class="cont-right">连续 <span>120</span> 天活跃且学习时长 >=10分钟 </div>
<div class="cont-right">累计上传 <span>100</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
<div class="cont-left">累计被赞 <span>500</span> 次 </div>
</div>
<div class="table-content">
<div style="line-height: 58px;" class="grade">LV.7</div>
<div class="cont-left">累计学习 <span>500</span> h</div>
<div class="cont-right">连续 <span>200</span> 天活跃且学习时长 >=10分钟 </div>
<div class="cont-right">累计上传 <span>300</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
<div class="cont-left">累计被赞 <span>1000</span> 次 </div>
</div>
<div class="table-content">
<div style="line-height: 58px;" class="grade">LV.8</div>
<div class="cont-left">累计学习 <span>1000</span> h</div>
<div class="cont-right">连续 <span>365</span> 天活跃且学习时长 >=10分钟 </div>
<div class="cont-right">累计上传 <span>800</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div>
<div class="cont-left">累计被赞 <span>2000</span> 次 </div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.table-content{
display: flex;
height: 58px;
.cont-left{
flex: 1;
margin-left: 8%;
text-align: center;
font-size: 14px;
color: #666666;
font-weight: 400;
line-height: 58px;
span{
font-size: 14px;
color: #333;
font-weight: 600;
}
}
.cont-right{
flex: 2;
margin-left: 8%;
text-align: center;
font-size: 14px;
color: #666666;
font-weight: 400;
line-height: 58px;
span{
font-size: 14px;
color: #333;
font-weight: 600;
}
.text{
font-size: 12px;
font-weight: 400;
color: #999999;
}
}
}
.tabledata{
flex: 2;
margin-left: 8%;
text-align: center;
span{
display: inline-block;
width: 118px;
height: 27px;
background: linear-gradient(90deg, #00A8FF 0%, #74C6FF 100%);
box-shadow: 0px 4px 9px 0px rgba(146,212,255,0.57);
border-radius: 14px;
border: 1px solid #FFFFFF;
font-size: 14px;
font-weight: 600;
color: #FFFFFF;
text-align: center;
line-height: 24px;
}
}
.grade{
width: 60px;
text-align: center;
font-size: 14px;
color: #333333;
font-weight: 600;
}
.tabletime{
flex: 1;
margin-left: 8%;
text-align: center;
span{
display: inline-block;
width: 118px;
height: 27px;
background: linear-gradient(90deg, #00A8FF 0%, #74C6FF 100%);
box-shadow: 0px 4px 9px 0px rgba(146,212,255,0.57);
border-radius: 14px;
border: 1px solid #FFFFFF;
font-size: 14px;
font-weight: 600;
color: #FFFFFF;
text-align: center;
line-height: 24px;
}
}
.rules-content{
padding-left: 25px;
width: 100%;
.table-hear{
display: flex;
margin-bottom: 40px;
.tabledata{
flex: 2;
margin-left: 78px;
text-align: center;
span{
display: inline-block;
width: 118px;
height: 27px;
background: linear-gradient(90deg, #00A8FF 0%, #74C6FF 100%);
box-shadow: 0px 4px 9px 0px rgba(146,212,255,0.57);
border-radius: 14px;
border: 1px solid #FFFFFF;
font-size: 14px;
font-weight: 600;
color: #FFFFFF;
text-align: center;
line-height: 24px;
}
}
}
}
.rulesbox{
.title{
width: 100%;
margin-bottom: 40px;
height: 50px;
.exp-hear-text {
float: left;
line-height: 65px;
margin-left: 25px;
font-size: 18px;
font-weight: 600;
color: #333333;
position: relative;
z-index: 888;
.exp-hear-textbor {
width: 85px;
height: 8px;
background: linear-gradient(90deg, #6C91E7 0%, #0078FC 100%);
border-radius: 9px;
display: inline-block;
position: absolute;
left: -6px;
z-index: -1;
top: 60%;
}
}
}
}
</style>