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

387 lines
6.6 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">
炽热体育巡回赛
</view>
<view class="texttop1">
<uni-row>
<uni-col :span="1">
<image src="@/static/照片.png" mode="" style="width: 34rpx;height: 34rpx;" class="imgtop1"></image>
</uni-col>
<uni-col :span="18" offset="1">
<text class="textnp">照片5000 </text>
</uni-col>
</uni-row>
</view>
<view class="texttop1">
<uni-row>
<uni-col :span="1">
<image src="@/static/时间.png" mode="" style="width: 34rpx;height: 34rpx;" class="imgtop1"></image>
</uni-col>
<uni-col :span="18" offset="1">
<text class="textnp">日期2024年4月21日</text>
</uni-col>
</uni-row>
</view>
<view class="texttop1">
<uni-row>
<uni-col :span="1">
<image src="@/static/dddd.png" mode="" style="width: 34rpx;height: 34rpx;" class="imgtop1"></image>
</uni-col>
<uni-col :span="18" :offset="1">
<text class="textnp">地址成都体育中心</text>
</uni-col>
</uni-row>
</view>
<view class="content">
<view class="text-area" style="margin-top: 34rpx;">
<lixx-buttongroup :btns="buttonptions" v-model="defaultValue"></lixx-buttongroup>
</view>
</view>
<view style="margin-top: 60rpx;">
<uni-row>
<uni-col :span="12" v-for="(item,index) in 10">
<image src="@/static/bg (1).png" mode="" style="width: 370rpx;height: 270rpx;"></image>
</uni-col>
</uni-row>
</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>
.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;
}
}
</style>