This commit is contained in:
lmj
2022-11-01 16:46:30 +08:00
parent d7d1e48426
commit 6a1522c0ba
3 changed files with 89 additions and 0 deletions

87
pages/my/myub.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<view>
<view class="myub-top">
<view class="ub-content">
<view>
<view class="ub-tab" @click="ubtab(1)" :class="tab == 1 ? 'ub-tabactive' : ' ' ">课程学习<text></text></view>
<view class="ub-tab" @click="ubtab(2)" :class="tab == 2 ? 'ub-tabactive' : ' ' ">知识贡献<text></text></view>
<view class="ub-tab" @click="ubtab(3)" :class="tab == 3 ? 'ub-tabactive' : ' ' ">平台活跃<text></text></view>
</view>
<view class="ub-listbox">
<view class="listbox-list">
<view class="classify">分类</view>
<view class="description">描述</view>
<view class="experience">经验值/U币</view>
<view class="upper">每日上限</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tab:1,
}
},
methods: {
ubtab(num){
this.tab = num
}
}
}
</script>
<style lang="scss" scoped>
.ub-listbox{
width: 100%;
height: 100%;
.listbox-list {
display:flex ;
}
}
.myub-top{
width: 100%;
height: 484upx;
background-image: url(../../static/images/myubimg.png);
background-repeat: no-repeat;
background-size: 100% / 100%;
padding-top: 245upx;
.ub-content{
background-color: #fff;
margin: 0 30upx;
height: 100%;
border-radius: 6px;
padding: 45upx 30upx;
.ub-tab{
color: #999999;
float: left;
font-size: 32upx;
margin-right: 44upx;
position: relative;
text{
width: 42px;
height: 4px;
background: linear-gradient(180deg, #FFA31F 0%, #FF6E0E 100%);
border-radius: 13px;
position: absolute;
left: 15%;
top: 120%;
display: none;
}
}
.ub-tabactive{
font-weight: 500;
color: #333333;
text{
display: inline-block;
}
}
}
}
</style>