You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
Sports/pages/user/homepage/homepage.vue

485 lines
8.3 KiB

<template>
<view>
<image style="width: 100%; height: 560rpx;" src="@/static/bg (1).png"></image>
<view class="custom-navigation-bar">
<view class="left-button" @click="handleBack">
<uni-icons type="left" color="#fff" size="30"></uni-icons>
</view>
<view class="title">
{{ title }}
</view>
</view>
<view class="texttop">
<uni-row>
<uni-col :span="8">
<image class="texttopimg" src="@/static/bg (1).png" mode=""></image>
</uni-col>
<uni-col span="13" offset="1">
<view >张三</view>
<view >性别</view>
<view >城市徐州市</view>
<view >用户ID00190980</view>
<view >单位个人</view>
<view class="ntian">加入巅峰速度田径巡回赛830天</view>
</uni-col>
<uni-col :span="2">
<uni-icons type="redo-filled" size="30" color="#fff"></uni-icons>
</uni-col>
</uni-row>
</view>
<view class="top1zj">
<view class="top1zj1">
最佳成绩
</view>
<view class="top1zjbox" v-for="(item,index) in 3">
<uni-row>
<uni-col :span="8">
<view class="top1zjbox1">top1zjbox1</view>
</uni-col>
<uni-col :span="8">
<uni-row>PB: <span style="color: #CA151F"> 16.67</span></uni-row>
<view class="xtext">风速:+1.2米/秒</view>
</uni-col>
<uni-col :span="8">
<uni-row>南京站</uni-row>
<view class="xtext">2024-04-23</view>
</uni-col>
</uni-row>
</view>
</view>
<view class="top2zj">
<view class="top2zj1">
获得荣誉
</view>
<view class="top2zj1box" v-for="(item,index) in 3">
<uni-row>
<uni-col :span="4">
<view class="guanjun">
冠军
</view>
</uni-col>
<uni-col :span="5" offset="1">
100米
</uni-col>
<uni-col :span="8">
公开男子组
</uni-col>
<uni-col :span="6">
南京站
</uni-col>
</uni-row>
<uni-row>
<uni-col :span="10" offset="4">
<view class="xz2">南京体育中心体育场</view>
</uni-col>
<uni-col :span="6" offset="4">
<view class="xz2">2024-04-23</view>
</uni-col>
</uni-row>
</view>
</view>
<view class="butbombox">
<view class="">最佳成绩公开<switch checked color='#CA151F'/></view>
<view class="" style="margin-left: 50rpx;" >获取荣誉公开<switch color='#CA151F'/></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '我的主页',
defaultValue: 'currenttime',
list: [{}, {}],
buttonptions: [{
label: '全部',
value: 'currenttime',
},
{
label: '签到',
value: 'today',
},
{
label: '起跑',
value: 'today1',
},
{
label: '赛中',
value: 'today2',
},
{
label: '颁奖',
value: 'today3',
},
]
}
},
onLoad() {
},
methods: {
updateuser() {
uni.navigateTo({
url: "/pages/user/update/update"
})
},
handleBack(){
uni.navigateBack()
},
notice() {
console.log(1111)
uni.navigateTo({
url: "/pages/user/notice/notice"
})
},
clubs() {
uni.navigateTo({
url: "/pages/user/clubs/clubs"
})
},
toPage(i) {
if (i == 1) {
uni.navigateTo({
url: "/pages/user/pseronal"
})
} else if (i == 4) {
uni.showModal({
title: "温馨提示",
content: "确定要退出吗?",
confirmColor: "#009944",
success(res) {
if (res.confirm) {
uni.showToast({
title: "退出成功"
})
setTimeout(() => {
uni.reLaunch({
url: "/pages/login/index"
})
}, 2000)
}
}
})
}
}
}
}
</script>
<style lang="scss" scoped>
.butbombox{
display: flex;
justify-content: center;
margin-top: 24rpx;
}
.xz2{
margin-top: 18rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 22rpx;
color: #999999;
}
.guanjun{
width: 120rpx;
height: 50rpx;
background: #CA151F;
border-radius: 10rpx 0rpx 40rpx 0rpx;
}
.top2zj{
margin-top: 24rpx;
width: 750rpx;
height: 482rpx;
padding: 40rpx;
background: #FFFFFF;
.top2zj1box{
width: 670rpx;
height: 110rpx;
margin-top: 24rpx;
background: #FEF7F8;
border-radius: 10rpx;
}
}
.top1zjbox{
width: 640rpx;
background: #F5F5F5;
margin-top: 24rpx;
padding: 18rpx;
.top1zjbox1{
line-height: 64rpx;
}
}
.top1zj1{
font-family: PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #333333;
}
.xtext{
font-family: PingFang SC;
font-weight: 500;
font-size: 22rpx;
color: #999999;
}
.top1zj{
margin-top: 84rpx;
padding: 40rpx;
width: 750rpx;
height: 422rpx;
background: #FFFFFF;
}
.texttopimg{
width: 228rpx;
height: 268rpx;
background: #F5E2E5;
border-radius: 5rpx;
border: 4px solid #FFFFFF;
}
.btnb {
display: inline-block;
margin-left: 25rpx;
width: 110rpx;
height: 60rpx;
background: linear-gradient(0deg, rgba(202, 21, 31, 0), rgba(202, 21, 31, 0.87));
border-radius: 10rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 26rpx;
color: #FFFFFF;
}
.btnb:active {
background: #fff;
color: red;
}
.btnb:first-child {
background: #fff;
color: red;
}
.texttop1 {
margin-left: 25rpx;
margin-top: 20rpx;
color: #FFFFFF;
.imgtop1 {
// margin-top: 20rpx;
margin-right: 25rpx;
}
}
.texttop {
font-family: PingFang SC;
font-weight: 500;
font-size: 36rpx;
color: #FFFFFF;
margin-top: -40rpx;
margin-left: 25rpx;
}
.custom-navigation-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 220rpx;
/* #ifdef MP-WEIXIN */
margin-top: -537rpx;
/* #endif */
}
.left-button,
.right-button {
padding: 0 12px;
}
.title {
flex: 1;
// text-align: center;
color: #fff;
font-size: 18px;
font-weight: bold;
}
.tishi {
width: 298rpx;
height: 29rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #666666;
margin: 0 auto;
margin-top: 50rpx;
}
.baomingbtn {
margin-top: 50rpx;
width: 200rpx;
height: 70rpx;
background: #CA151F;
border-radius: 35rpx;
}
.bottom {
margin: 0 auto;
margin-top: 50rpx;
width: 702rpx;
height: 182rpx;
background: #FFFFFF;
border-radius: 20rpx;
display: flex;
justify-content: center;
.imgbottom {
margin-top: 20rpx;
margin-right: 40rpx;
width: 110rpx;
height: 110rpx;
}
.textbuttom {
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #333333;
}
}
.detail {
padding: 20rpx;
width: 642rpx;
// height: 138rpx;
background: #F5F5F5;
border-radius: 10rpx;
margin: 0 auto;
margin-top: 10px;
display: flex;
justify-content: space-between;
.biaoti {
width: 214rpx;
height: 29rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #333333;
}
.biaoti1 {
margin-top: 20rpx;
.text1 {
font-family: PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #999999;
}
.text2 {
font-family: PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #CA151F;
}
}
}
.imgw13 {
margin-left: 15rpx;
border: 1px dashed black;
padding: 5rpx;
width: 24rpx;
height: 24rpx;
}
.saicheng {
width: 702rpx;
// height: 414rpx;
background: #fff;
margin: 0 auto;
padding-bottom: 40rpx;
}
.saichengtop {
padding: 20rpx;
display: flex;
justify-content: space-between;
}
.upxinxi {
display: flex;
justify-content: center;
.bianji {
margin-top: 45rpx;
width: 90rpx;
height: 90rpx;
}
.name11 {
margin-top: 150rpx;
margin-left: -100rpx;
}
.adduser {
margin-top: 150rpx;
margin-left: -100rpx;
}
}
.top {
position: absolute;
top: 117upx;
left: 25upx;
font-family: PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
}
.top1 {
position: absolute;
top: 184upx;
left: 315upx;
.tuxiang {
width: 120rpx;
height: 120rpx;
background: #FFFFFF;
border-radius: 50%;
}
.xinxi {
display: flex;
.bianji {
margin-left: 20rpx;
width: 44rpx;
height: 44rpx;
}
.name {
color: #fff;
}
}
.julexinxi {
color: #fff;
}
.upxinxi {
position: absolute;
top: 254upx;
left: -290upx;
width: 702rpx;
height: 220rpx;
background: #FFFFFF;
border-radius: 20rpx;
}
}
.ntian{
font-size: 28rpx;
}
</style>