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/record/detail/detail.vue

229 lines
5.0 KiB

<template>
<view class="oppo-box">
<!-- <view class="top">
记录
</view> -->
<image style="width: 100%; height: 247rpx;" src="@/static/bg (2).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>
<!-- <image style="width: 100%;height: 206rpx;" src="@/static/bg (2).png"></image> -->
<view class="content">
<view class="userimg">
<image class="userimg1" src="@/static/bg (2).png"></image>
<image class="userimg1" style="margin-left: 54upx;margin-top: 25upx;" src="@/static/bg (2).png"></image>
<image class="userimg1" style="margin-left: 54upx;" src="@/static/bg (2).png"></image>
</view>
<view class="textname">
<view class="taexnaem1" style="margin-left: -10upx;">王二</view>
<view class="taexnaem1" style="margin-left: 80upx;margin-top: -70upx;">李大花</view>
<view class="taexnaem1" style="margin-left: 80upx;">张三</view>
</view>
<view class="textchengji">
<view class="taexnaem1" style="margin-left: upx;">6.79</view>
<view class="taexnaem1" style="margin-left: 80upx;margin-top: -40upx;">6.78</view>
<view class="taexnaem1" style="margin-left: 80upx;">6.81</view>
</view>
<view class="textshijian">
<view class="taexnaem1" style="margin-left: upx;">2023-04-30</view>
<view class="taexnaem1" style="margin-left: 80upx;margin-top: -40upx;">2023-04-30</view>
<view class="taexnaem1" style="margin-left: 40upx;">2023-04-30</view>
</view>
<image style="width: 680upx;height:242rpx;margin-left:30rpx;margin-top: -30upx;" src="@/static/奖台.png"></image>
</view>
<view class="">
<uni-table stripe emptyText="暂无更多数据" >
<!-- 表头行 -->
<uni-tr>
<uni-th width="20" align="center"></uni-th>
<uni-th width="100" align="center">名次</uni-th>
<uni-th width="100" align="center">成绩</uni-th>
<uni-th width="100" align="left">比赛时间</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr>
<uni-td>1</uni-td>
<uni-td>2020-10-20</uni-td>
<uni-td>Jeson</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
</uni-table>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title:'记录详情'
}
},
methods: {
handleBack(){
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.top {
position: absolute;
top: 117upx;
left: 25upx;
font-family: PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
}
.textshijian{
display: flex;
justify-content: center;
.taexnaem1{
text-align: center;
width: 180rpx;
height: 54rpx;
color: #999999;
// opacity: 0.1;
}
}
.textchengji{
display: flex;
justify-content: center;
.taexnaem1{
text-align: center;
width: 150rpx;
height: 54rpx;
color: #333333;
// opacity: 0.1;
}
}
.textname{
display: flex;
justify-content: center;
.taexnaem1{
margin-top: -30upx;
text-align: center;
width: 150rpx;
height: 54rpx;
background: #060A11 ;
border-radius: 22rpx;
opacity: 0.5;
color: #fff;
// opacity: 0.1;
}
}
.userimg{
display: flex;
justify-content:center;
.userimg1{
width: 160rpx;
height: 160rpx;
background: #FFF7EA;
border-radius: 50%;
border: 4px solid #FFBD4B;
margin-top: 70upx;
}
.userimgtext{
text-align: center;
width: 150rpx;
height: 54rpx;
color: #FFF;
background: #060A11;
border-radius: 22rpx;
opacity: 0.5;
position: absolute;
top:620upx;
left:9%;
}
.userimgtexter{
text-align: center;
width: 150rpx;
height: 54rpx;
color: #FFF;
background: #060A11;
border-radius: 22rpx;
opacity: 0.5;
position: absolute;
top:580upx;
left: 40%;
}
.userimgtextsan{
text-align: center;
width: 150rpx;
height: 54rpx;
color: #FFF;
background: #060A11;
border-radius: 22rpx;
opacity: 0.5;
position: absolute;
top:620upx;
left:70%;
}
.userimgtext1{
width: 103rpx;
height: 23rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: black;
}
.userimgtext2{
margin-top: 20upx;
width: 131rpx;
height: 17rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 22rpx;
color: #999999;
}
}
.content{
margin: 0 auto;
.imgtext{
position: relative;
top:-90upx;
left:42%;
font-size: 32rpx;
color: #FFFFFF;
}
.imgtext1{
width: 256rpx;
height: 31rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #333333;
margin: 0 auto;
}
}
.custom-navigation-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 220rpx;
/* #ifdef MP-WEIXIN */
margin-top: -230rpx;
/* #endif */
}
.left-button,
.right-button {
padding: 0 12px;
}
.title {
flex: 1;
// text-align: center;
color: #fff;
font-size: 18px;
font-weight: bold;
}
</style>