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

提交

Browse Source
This commit is contained in:
zhaofang
2022-11-11 11:04:23 +08:00
parent 8c776f0a02
commit eefa5e05e2
3 changed files with 81 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
pages/my/myMedal.vue
View File

@@ -30,7 +30,12 @@
<view class="medel-show-box">
<image class="img" @click="show = false" style="width:44upx;height:44upx" src="../../static/images/cancel.png" mode=""></image>
<view class="medal-info-top">
<image style="width:268upx;height:300upx" :src="fileBaseUrl+medalData.medalIcon" mode=""></image>
<view class="medal-img-index">
<image style="width:268upx;height:300upx" :src="fileBaseUrl+medalData.medalIcon" mode=""></image>
<text class="img-name">{{medalData.medalName}} </text>
<text class="img-level">LV.{{medalData.medalLevel}}</text>
</view>
<view class="title-info">
{{medalData.medalName}} <text style="color: #387DF7;">LV.{{medalData.medalLevel}}</text>
</view>
@@ -40,8 +45,16 @@
</view>
<view class="medal-info-flex">
<view class="medal-info-index" v-for="(ru,index) in rules">
<image style="width:104upx;height:120upx" :src="fileBaseUrl+medalData.medalIcon" mode=""></image>
<text style="color: color: #666666;font-size: 24upx;">LV.{{index+1}}</text>
<view class="" style="height: 50upx;">
<image v-if="medalData.medalLevel == index+1" style="width:32upx;height:16upx" src="../../static/images/triangle.png" mode=""></image>
</view>
<view class="medal-img-index">
<image style="width:104upx;height:120upx" :src="fileBaseUrl+medalData.medalIcon" mode=""></image>
<text class="img-name">{{medalData.medalName}} </text>
<text class="img-level">LV.{{index+1}}</text>
</view>
<text v-if="medalData.medalLevel == index+1" style="color: #387DF7;font-size: 24upx;">LV.{{index+1}}</text>
<text v-else style="color: color: #666666;font-size: 24upx;">LV.{{index+1}}</text>
</view>
</view>
</view>
@@ -103,6 +116,7 @@
/deep/ .u-popup__content{
border-radius: 16upx;
}
.medel-show-box{
position: relative;
background: url(../../static/images/show-bg.png) no-repeat 100% / 100%;
@@ -127,14 +141,56 @@
font-size: 28upx;
color: #999999;
}
.medal-img-index{
position: relative;
width:268upx;
height:300upx;
margin: 0 auto;
.img-name{
position: absolute;
font-size: 20upx;
color: #fff;
bottom: 10%;
left:0;
right:0;
}
.img-level{
position: absolute;
font-size: 12upx;
color: #fff;
left:44%;
top: 20%;
}
}
}
.medal-info-flex{
display: flex;
overflow-x: auto;
padding: 60upx 52upx;
padding: 30upx 52upx;
.medal-info-index{
text-align: center;
margin-right: 60upx;
.medal-img-index{
position: relative;
.img-name{
position: absolute;
font-size: 20upx;
color: #fff;
bottom: 10%;
left:0;
right:0;
// left:6%;
transform: scale(.5);
}
.img-level{
position: absolute;
font-size: 12upx;
color: #fff;
left:30%;
top: 12%;
transform: scale(.5);
}
}
}
}
@@ -189,24 +245,25 @@
font-weight: 500;
color: #333333;
}
.medal-img-index{
position: relative;
.img-name{
position: absolute;
font-size: 20upx;
color: #fff;
bottom: 20upx;
left:36upx;
transform: scale(.7);
}
.img-level{
position: absolute;
font-size: 12upx;
color: #fff;
left:60upx;
top: 24upx;
transform: scale(.7);
}
}
.medal-img-index{
position: relative;
.img-name{
position: absolute;
font-size: 20upx;
color: #fff;
bottom: 20upx;
left:36upx;
transform: scale(.7);
}
.img-level{
position: absolute;
font-size: 12upx;
color: #fff;
left:60upx;
top: 24upx;
transform: scale(.7);
}
}
.medal-list-index:last-child{