<template>
	<view class="page">
		<uni-section>
			<uni-row class="team-item">
				<uni-col :span="6">
					<view class="team-item-image">
						<uv-avatar
							src="https://oss.wsdns.cn/20240612/0eb637277e5a4bff9d40b16ddb64b1f0.jpeg?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90"
							shape="square"
							size="70"
							randomBgColor
						></uv-avatar>
					</view>
				</uni-col>
				<uni-col :span="18">
					<uv-cell :cellStyle="{ padding: '0' }" :border="false">
						<template v-slot:title>
							<uv-text text="技能大帅提升班" size="20"></uv-text>
						</template>
						<template v-slot:label>
							<view>
								<uni-tag text="技能大师工作室" size="mini" type="warning"></uni-tag>
							</view>
						</template>
					</uv-cell>
				</uni-col>
			</uni-row>
			<uv-gap height="20"></uv-gap>
			<view class="team-item-desc web-text-secondary">
				<uv-text
					text="搜索世界各地美食，美食研究所“只做安心食品”，让用户买得放心，吃得安心。本团队为美食研究所唯一官方社群，集结各地美食家。轻松愉悦的社群环境，大胆畅聊品质生活、共同分享独到的美食品鉴感受。"
				></uv-text>
			</view>
			<uv-gap height="10"></uv-gap>
		</uni-section>
		<uni-section title="团队公告" style="padding: 0 10px;">
			<view class="team-item-desc web-text-secondary">
				<uv-text
					text="搜索世界各地美食，美食研究所“只做安心食品”，让用户买得放心，吃得安心。本团队为美食研究所唯一官方社群，集结各地美食家。轻松愉悦的社群环境，大胆畅聊品质生活、共同分享独到的美食品鉴感受。"
				></uv-text>
			</view>
		</uni-section>
		<uni-section title="重要成员" style="padding: 0 10px;">
			<view class="team-item-desc">
				<uv-avatar-group :urls="urls" size="45" gap="-0.3"></uv-avatar-group>
			</view>
		</uni-section>
		<uni-section title="团队成员" style="padding: 0 10px;">
			<view class="team-item-desc">
				<uv-avatar-group :urls="urls" size="45" gap="-0.3"></uv-avatar-group>
			</view>
		</uni-section>
	</view>
</template>

<script>
export default {
	data() {
		return {
			index: 0,
			name: '学习任务',
			list: [
				{
					name: '学习任务'
				},
				{
					name: '动态'
				},
				{
					name: '课件'
				},
				{
					name: '新闻'
				},
				{
					name: '相册'
				},
				{
					name: '知识开发'
				},
				{
					name: '积分排行榜'
				},
				{
					name: '团队仪表盘'
				}
			],
			urls: [
				'https://cdn.uviewui.com/uview/album/1.jpg',
				'https://cdn.uviewui.com/uview/album/2.jpg',
				'https://cdn.uviewui.com/uview/album/3.jpg',
				'https://cdn.uviewui.com/uview/album/4.jpg',
				'https://cdn.uviewui.com/uview/album/7.jpg',
				'https://cdn.uviewui.com/uview/album/6.jpg',
				'https://cdn.uviewui.com/uview/album/5.jpg'
			]
		};
	},
	methods: {
		onTabs(e) {
			this.index = e.index;
			this.name = e.name;
		},
		openUrl(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
	page{
		background-color: #ffffff;
	}
.team-item {
	padding: 0 16rpx;
	&-info {
		margin-bottom: 6rpx;
		&-avatar-group {
			display: flex;
			width: 680rpx;
			margin: 0rpx auto;
		}
	}
	&-image {
		display: flex;
		justify-content: center;
	}
	&-info-title{
		font-size: 38rpx;
		font-weight: 400;
	}
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.1);
	}
}
.team-item-desc{
	width: 680rpx;
	margin: auto;
}
.save-btn-bar{
	width: 400rpx;
	margin: auto;
}
.news-activity {
	padding: 0 20rpx;
	display: flex;
	align-items: center;
}
.more-team {
	text-align: center;
	font-size: 28rpx;
}
</style>
