match_applet/pagesHome/team/info.vue

<template>
	<view class="content">
		<view class="one">
			<view class="left" @tap="toEdit(info)">
				<view class="left_1">
					<image class="image" mode="aspectFill" :src="info.logo||'/static/qiudui.png'">
					</image>
				</view>
				<view class="right_1">
					<view class="name">{{info.name||'暂无名称'}}</view>
					<view class="ranking">{{info.ranking||'暂无排名'}}</view>
				</view>
			</view>
			<view class="right">
				<button type="warn" size="mini" @tap="toSave">
					<uni-icons type="plusempty" size="12" color="#ffffff"></uni-icons>
					<text>创建</text>
				</button>
			</view>
		</view>
		<view class="two">
			<view class="two_1">
				创建活动，还可以微信、短信通知队员报名
			</view>
			<view class="two_2">
				<button type="warn" size="mini" @tap="toSave">创建</button>
			</view>
			<view class="two_3">
				<uni-icons type="list" size="18"></uni-icons>
				<text>查看全部活动</text>
			</view>
		</view>
		<view class="thr">
			<view class="thr_1">
				<view class="list" v-for="(item, index) in menuList" :key="index" @tap="toInfo(item)">
					<uni-icons custom-prefix="iconfont" :type="item.icon" size="25" :color="item.color"></uni-icons>
					<view class="name">{{item.name}}</view>
				</view>
			</view>
			<view class="thr_2">
				<view class="fraction">
					<view class="top">{{info.score||0}}</view>
					<view class="bottom">总比赛</view>
				</view>
				<view class="circle">
					<circle :pro="16/100" :border_back_color="'#f1f1f1'" :border_color="'#FF0000'" content="16">
					</circle>
					<text>胜</text>
				</view>
				<view class="circle">
					<circle :pro="5/100" :border_back_color="'#f1f1f1'" :border_color="'#35BD7B'" content="5"></circle>
					<text>平</text>
				</view>
				<view class="circle">
					<circle :pro="17/100" :border_back_color="'#f1f1f1'" :border_color="'#FFA500'" content="17">
					</circle>
					<text>负</text>
				</view>
				<uni-icons type="forward" size="25" color="#858585"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	import circle from './components/circle.vue';
	//该依赖已内置不需要单独安装
	import { onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	// 详情
	const info = ref({ id: 1, name: '测试球队', score: '39' });
	// 详情信息id
	const id = ref('');
	onLoad(async (options) => {
		id.value = options && options.id
		await search();
	})
	// 查询
	const search = async () => {
		if (id.value) { }
	};
	// 标签列表
	const menuList = ref([
		{ name: '队员', icon: 'icon-a-14-chengyuanguanli', color: '#333333' },
		{ name: '相册', icon: 'icon-xiangce', color: '#333333' },
		{ name: '账本', icon: 'icon-zhangben', color: '#333333' },
		{ name: '战术板', icon: 'icon-cricket-pitch', color: '#333333' },
	]);
	// 修改
	const toEdit = (item : any) => {
		uni.navigateTo({
			url: `/pagesHome/team/index?id=${item._id || item.id}`,
		})
	};
	// 创建
	const toSave = () => { };
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		background-color: var(--footColor);

		.one {
			display: flex;
			justify-content: space-between;
			height: 40vw;
			padding: 8vw 3vw 0 3vw;
			background-color: var(--f12Color);

			.left {
				display: flex;

				.left_1 {
					padding: 0 2vw;

					.image {
						width: 18vw;
						height: 18vw;
						border-radius: 1vw;
						background-color: var(--mainColor);
					}
				}

				.right_1 {
					color: var(--mainColor);

					.name {
						font-size: var(--font18Size);
						font-weight: bold;
					}

					.ranking {
						margin: 4vw 0 0 0;
						font-size: var(--font16Size);
					}
				}
			}

			.right {
				margin: 4vw 0 0 0;

				text {
					font-size: var(--font14Size);
				}
			}
		}

		.two {
			position: absolute;
			top: 35vw;
			width: 94vw;
			margin: 0 3vw;
			padding: 5vw 0 0 0;
			border-radius: 1vw;
			text-align: center;
			background-color: var(--mainColor);

			.two_1 {
				font-size: var(--font16Size);
				color: var(--f99Color);
				padding: 2vw 0;
			}

			.two_2 {
				padding: 4vw 0;

				button {
					padding: 0 10vw;
					font-size: var(--font16Size);
				}
			}

			.two_3 {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 5vw 0;
				font-size: var(--font14Size);
				border-top: 1px solid var(--footColor);

				text {
					padding: 0 2vw;
				}
			}
		}

		.thr {
			position: absolute;
			top: 88vw;
			width: 94vw;
			margin: 0 3vw;
			padding: 2vw 0;
			border-radius: 1vw;
			background-color: var(--mainColor);

			.thr_1 {
				display: flex;
				justify-content: space-around;
				padding: 1vw 0 4vw 0;
				border-bottom: 1px solid var(--footColor);

				.list {
					display: flex;
					flex-direction: column;
					align-items: center;

					.name {
						margin: 1vw 0 0 0;
						color: var(--f33Color);
						font-size: var(--font14Size);
					}
				}
			}

			.thr_2 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 4vw 2vw;

				.fraction {
					display: flex;
					flex-direction: column;
					align-items: center;

					.top {
						font-size: var(--font20Size);
						font-weight: bold;
					}

					.bottom {
						color: var(--f99Color);
						font-size: var(--font14Size);
					}
				}

				.circle {
					display: flex;
					align-items: center;
					color: var(--f99Color);
					font-size: var(--font14Size);

					text {
						padding: 0 1vw;
					}
				}
			}
		}
	}
</style>