realty/virgo.wzfrontend/workark/src/layout/components/share.vue

<template>
	<div class="share-box">
		<div class="left hui-detail">
			<div class="hui-detail-box">
				<div class="hui-detail-content">
					<div class="hui-detail-item">
						<div class="hui-detail-label">已邀请人数</div>
						<div class="hui-detail-value">1</div>
					</div>
					<div class="hui-detail-item">
						<div class="hui-detail-label">邀请码</div>
						<div class="hui-detail-value">2</div>
					</div>
					<div class="hui-detail-item">
						<div class="hui-detail-label">分享链接</div>
						<div class="hui-detail-value color-danger">3</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="qr-code-image">
				<img src="/assets/ma.png" />
			</div>
			<el-button type="primary" size="small">下载二维码</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {};
		},
		onLoad() {},
		methods: {},
	}
</script>

<style lang="scss">
	.share-box {
		width: 100%;
		height: 100%;
		display: flex;

		.left {
			flex: 1;
			width: 0;
			display: flex;
			flex-direction: column;
			padding: 20px;
		}

		.right {
			padding: 10px 0;
			width: 260px;
			border-left: 1px solid $--border-color-light;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.share-information-box {
			border-radius: 4px;
			box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.1);
			padding: 10px 15px;
			display: flex;
			margin-top: 20px;
			align-items: center;

			.name {
				width: 80px;
				color: $--color-text-secondary;
			}

			.label {
				flex: 1;
				width: 0;
			}

			.btn {
				color: $--color-primary;
				font-size: $--font-size-small;
			}
		}

		.qr-code-image {
			width: 150px;
			margin-bottom: 10px;

			img {
				width: 100%;
			}
		}
	}
</style>