ChuangHengWx/components/CusTeamInfo/index.vue

<template>
	<div class="dialog adffc" v-if="show">
		<div class="dialog-box">
			<div class="dialog-box-title">{{title}}</div>
			<image class="dialog-box-close" :src="imgBase+'remind_close.png'" @click="close"></image>
			<div class="dialog-box-form">
				<div class="dialog-box-form-item adfacjb">
					<div class="dialog-box-form-item-left">团队名称</div>
					<div class="dialog-box-form-item-right">{{teamInfo.aaa||'暂无'}}</div>
				</div>
				<div class="dialog-box-form-item adfacjb">
					<div class="dialog-box-form-item-left">所在公司</div>
					<div class="dialog-box-form-item-right">{{teamInfo.bbb||'暂无'}}</div>
				</div>
				<div class="dialog-box-form-item adfacjb">
					<div class="dialog-box-form-item-left">所属地区</div>
					<div class="dialog-box-form-item-right">{{teamInfo.ccc||'暂无'}}</div>
				</div>
				<div class="dialog-box-form-item adfacjb">
					<div class="dialog-box-form-item-left">所属行业</div>
					<div class="dialog-box-form-item-right">{{teamInfo.ddd||'暂无'}}</div>
				</div>
				<div class="dialog-box-form-item adfacjb">
					<div class="dialog-box-form-item-left">团队职能类型</div>
					<div class="dialog-box-form-item-right">{{teamInfo.eee||'暂无'}}</div>
				</div>
				<div class="dialog-box-form-item adfacjb">
					<div class="dialog-box-form-item-left">团队架构类型</div>
					<div class="dialog-box-form-item-right">{{teamInfo.fff||'暂无'}}</div>
				</div>
				<div class="dialog-box-form-item adfacjb">
					<div class="dialog-box-form-item-left">团队规模</div>
					<div class="dialog-box-form-item-right">{{teamInfo.ggg||'暂无'}}</div>
				</div>
				<div class="dialog-box-form-item adfacjb">
					<div class="dialog-box-form-item-left">团队层级</div>
					<div class="dialog-box-form-item-right">{{teamInfo.hhh||'暂无'}}</div>
				</div>
			</div>
			<div class="dialog-box-intro">
				<div class="dialog-box-intro-title">团队简介</div>
				<div class="dialog-box-intro-content">{{teamInfo.iii||'暂无'}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			title:{
				typeof:String,
				default:'团队信息'
			},
			show:{
				typeof:Boolean,
				default:false
			},
			teamInfo:{
				typeof:Object,
				default:null
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			close(){
				this.$emit('close')
			}
		}
	}
</script>

<style scoped lang="scss">
	.dialog{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1001;
		background: rgba(0,0,0,.4);
		justify-content: flex-end;
		&-box{
			width: 100%;
			background: #F7F7F7;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding: 30rpx 24rpx 50rpx;
			box-sizing: border-box;
			position: relative;
			&-title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #002846;
				line-height: 32rpx;
				text-align: center;
			}
			&-close{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}
			&-form{
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				margin-top: 48rpx;
				&-item{
					padding: 28rpx 24rpx;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
					&-left{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #002846;
						line-height: 42rpx;
						width: 200rpx;
					}
					&-right{
						width: calc(100% - 200rpx);
						padding-left: 20rpx;
						box-sizing: border-box;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #667E90;
						line-height: 32rpx;
						text-align: right;
					}
				}
			}
			&-intro{
				background: #FFFFFF;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(229,231,235,0.5);
				border-radius: 24rpx;
				margin-top: 20rpx;
				width: 100%;
				padding: 28rpx 24rpx;
				box-sizing: border-box;
				&-title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #002846;
					line-height: 42rpx;
				}
				&-content{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #667E90;
					line-height: 42rpx;
					margin-top: 36rpx;
				}
			}
		}
	}
</style>