Sports/pages/user/clubs/detail/detail.vue

<template>
	<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>
		<view class="boxjule">
			<image class="imagejule" src="../../../../static/bg (1).png" mode="scaleToFill"></image>
			<uni-row>
				<uni-col :span="8" :offset="1" class="h1text">赛速体能俱乐部</uni-col>
				<uni-col :span="6" :offset="9">积分：<text style="color: red;">2980</text></uni-col>
			</uni-row>
			<view class="dizhi">
				<uni-row>
					<uni-col :span="18" :offset="1" class="h1text">
						<image src="../../../../static/dizhi.png"
							style="width:22rpx;height:24rpx; margin-right: 10rpx;"></image>
						地址：福山新城区金海创意中心8楼
					</uni-col>
					<uni-col :span="5">
						<image src="../../../../static/电话.png" style="width:50rpx;height:50rpx;" @click="phone"></image>
						<image src="../../../../static/地址.png" style="width:50rpx;height:50rpx;margin-left: 20rpx;">
						</image>
					</uni-col>
				</uni-row>
			</view>
			<view class="neirong">
				马拉松(Marathon)长跑是国际上非常普及的长跑比赛项目，全程距离26英里385码，
				折合为42.195公里(也有说法为42.193公里)。分全程马拉松(FuIMarathon)、半程马拉松(HalfMarathon)和四分马拉松(Quarter
				Marathon)三种
			</view>
			<view class="tableneirong">
				<view class="tabletop">
					<image src="../../../../static/1.png" style="width:50rpx;height:50rpx;"></image><text class="tabletext">1</text>
					<image src="../../../../static/2.png" class="img2" ></image><text class="tabletext">2</text>
					<image src="../../../../static/3.png" class="img2"></image><text class="tabletext">3</text>
				</view>
				<view class="">
					<uni-table border stripe emptyText="暂无更多数据">
						<uni-tr v-for="(item, index) in tableData" :key="index">
							<uni-td>{{ item.date }}</uni-td>
							<uni-td>
								<view class="name">{{ item.name }}</view>
							</uni-td>
							<uni-td align="center">{{ item.address }}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				<button class="butbom">申请加入俱乐部</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '俱乐部详情',
				tableData: [{
					date: 111,
					name: 222,
					address: 333
				}, {
					date: 111,
					name: 222,
					address: 333
				}],
			}
		},
		methods: {
			phone(){
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			},
			detail() {
				uni.navigateTo({
					url: "/pages/user/notice/detail/detail"
				})
			},
			handleBack() {
				uni.navigateBack()
				// console.log(1344444);
				// uni.switchTab({
				// 	url: "/pages/user/index"
				// })
			},
			toPage() {
				console.log(1111232)
				uni.navigateTo({
					url: "/pages/user/index"
				})
			},
		}
	}
</script>

<style lang="scss">
	.butbom{
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 40rpx;
		width: 662rpx;
		height: 90rpx;
		background: #CA151F;
		border-radius: 45rpx;
	}
	.tabletext{
		position: relative;
		top:-10rpx
	}
	.img2{
		width:50rpx;height:50rpx;margin-left: 20rpx;
	}
	.tabletop{
		padding: 20rpx;
	}
	.tableneirong{
		width: 750rpx;
		height: 802rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	.neirong {
		width: 702rpx;
		height: 268rpx;
		background: #FAF5F6;
		border-radius: 20rpx;
		margin: 25rpx;
		line-height: 50rpx;
	}

	.dizhi {
		margin-top: 20upx;
	}

	.h1text {
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 36rpx;
		color: #222222;
	}

	.boxjule {
		width: 750rpx;
		height: 862rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}

	.imagejule {
		width: 702rpx;
		height: 390rpx;
		background: #D7DCE2;
		border-radius: 20rpx;
		margin: 25rpx;
	}

	.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>