clockIn-wechat-uniapp-241018/components/broadside/broadside.vue

<!-- 侧边栏 -->
<template>
	<view class="broadside">
		<uv-popup ref="popup" :overlayStyle="{background: 'rgba(255,255,255,.2sss)'}" bgColor="#4199EA">
			<view class="content">
				<!-- 用户信息 -->
				<view class="user-info">
					<image :src="userInfo.headImage" mode="widthFix"></image>
					<view class="base">
						<view class="name">{{ userInfo.nickName }}</view>
						<view class="project"
						v-if="userInfo.team">{{ userInfo.team.name }}</view>
					</view>
				</view>
				
				<!-- 团队项目列表 -->
				<view class="team-list"
						v-if="userInfo.team">
					<view
					class="active-team team-item">
						<view class="team-item-left">
							<image src="@/static/image/broadside/project.png" 
							mode="widthFix"></image>
							<view class="team-name">{{ userInfo.team.name }}</view>
						</view>
						<view class="team-item-right">
							<uni-icons
							type="checkmarkempty" size="30" 
							color="#fff"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: "broadSide",
		data() {
			return {
				
			}
		},
		computed : {
			...mapState(['teamList', 'userInfo']),
		},
		methods: {
			open() {
				this.$refs.popup.open('left');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.broadside {
		
		.content {
			padding-top: var(--status-bar-height);
			width: 650rpx;
			
			// 用户信息
			.user-info {
				width: 85%;
				margin: 70rpx auto 0rpx auto;
				display: flex;
				flex-wrap: wrap;
				
				image {
					width: 150rpx;
					border-radius: 20rpx;
				}
				
				.base {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					width: calc(100% - 150rpx);
					color: white;
					box-sizing: border-box;
					padding: 10rpx 0rpx 0rpx 15rpx;
					
					.name {
						font-size: 40rpx;
					}
					
					.project {
						font-size: 28rpx;
					}
				}
			}
			
			// 团队项目列表
			.team-list {
				margin-top: 30rpx;
				height: 80vh;
				overflow-y: scroll;
				
				.team-item {
					display: flex;
					flex-wrap: wrap;
					color: white;
					height: 10%;
					box-sizing: border-box;
					padding: 0rpx 15rpx;
					margin: 5rpx 0rpx;
					
					.team-item-left {
						width: 90%;
						display: flex;
						align-items: center;
						
						image {
							width: 70rpx;
						}
						
						.team-name {
							font-size: 34rpx;
							margin-left: 15rpx;
						}
					}
					
					.team-item-right {
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				
				.active-team {
					background: #8CBDE9;
				}
			}
		}
	}
</style>