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

勋章规则换成接口数据

Browse Source
This commit is contained in:
zhaofang
2022-10-18 11:34:23 +08:00
parent abf85c0daa
commit 16a48eb804
3 changed files with 74 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/styles/portal-index.scss
View File

@@ -435,6 +435,9 @@
} }
// boe-index // boe-index
@media screen and (max-width: 1366px){ @media screen and (max-width: 1366px){
.medal-index{ // 勋章规则控制
margin: 40px 26px 0 26px;
}
.xindex-content{ .xindex-content{
width: 1100px; width: 1100px;
} }
@@ -669,6 +672,9 @@
} }
} }
@media screen and (max-width: 1680px) and (min-width:1367px){ @media screen and (max-width: 1680px) and (min-width:1367px){
.medal-index{ // 勋章规则控制
margin: 40px 50px 0 50px;
}
.xindex-content{ .xindex-content{
width: 1366px; width: 1366px;
} }
@@ -893,6 +899,9 @@
} }
@media screen and (max-width: 1920px) and (min-width: 1681px){ @media screen and (max-width: 1920px) and (min-width: 1681px){
.medal-index{ // 勋章规则控制
margin: 40px 60px 0 60px;
}
.xindex-content{ .xindex-content{
width: 1690px; width: 1690px;
} }
@@ -1123,6 +1132,9 @@
} }
@media screen and (min-width: 1921px){ @media screen and (min-width: 1921px){
.medal-index{ // 勋章规则控制
margin: 40px 60px 0 60px;
}
.xindex-content{ .xindex-content{
width: 1880px; width: 1880px;
} }

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

@@ -275,7 +275,7 @@
} }
.medal-index{ .medal-index{
width: 144px; width: 144px;
margin: 40px 60px 0 60px;
text-align: center; text-align: center;

120
src/views/medal/urules.vue
View File

@@ -9,73 +9,75 @@
<div class="rules-content"> <div class="rules-content">
<div class="table-hear"> <div class="table-hear">
<div class="grade">勋章等级</div> <div class="grade">勋章等级</div>
<div class="tabletime"><span>跬步千里</span></div> <div v-for="(ru, inx) in nameData" :class="(inx == 0 || inx == nameData.length -1)?'tabletime':'tabledata'"><span>{{ru.name}}</span></div>
<div class="tabledata"><span>持之以恒</span></div>
<div class="tabledata"><span>知识贡献者</span></div>
<div class="tabletime"><span>社交达人</span></div>
</div> </div>
<div class="table-content"> <div class="table-content" v-for="item in rulesData">
<div style="line-height: 58px;" class="grade">LV.1</div> <div style="line-height: 58px;" class="grade">LV.{{item.level}}</div>
<div class="cont-left">累计学习 <span>1</span> h</div> <div class="cont-left">{{item.study}}</div>
<div class="cont-right">连续 <span>1</span> 天活跃且学习时长 >=10分钟 </div> <div class="cont-right">{{item.day}}</div>
<div class="cont-right">累计上传 <span>1</span> 个知识 <span class="text">（课程、文章、笔记）</span> </div> <div class="cont-right">{{item.steadily}}</div>
<div class="cont-left">累计被赞 <span>10</span> 次 </div> <div class="cont-left">{{item.popularity}}</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> </div>
</div> </div>
</template> </template>
<script> <script>
import apiStat from '@/api/phase2/stat.js';
export default { export default {
data(){
return{
nameData:[],
rulesData:[],
}
},
mounted() {
this.getConfig();
},
methods:{
getConfig() {
apiStat.userMedalConfig().then(res=>{
let rulesData = [];
let studyList = [];
let dayList = [];
let steadilyList = [];
let popularityList = [];
if(res.status == 200){
res.result.forEach(item => {
item.rules = JSON.parse(item.rules);
this.nameData.push({
id: item.id,
name: item.name
})
if(item.id == 1) {
studyList = item.rules;
}
if(item.id == 2) {
dayList = item.rules;
}
if(item.id == 3) {
steadilyList = item.rules;
}
if(item.id == 4) {
popularityList = item.rules;
}
});
for (let index = 0; index < 8; index++) {
rulesData.push({
level:index+1,
study: studyList[index].remark,
day:dayList[index].remark,
steadily:steadilyList[index].remark,
popularity:popularityList[index].remark,
})
}
this.rulesData = rulesData;
}
})
},
}
// userMedalConfig
} }
</script> </script>