OpenDoorManageMini/pages/globalPages/components/account.vue

<template>
	<view class="container">
		商户运营
	</view>
</template>

<script setup>
	function onshow(){
		console.log('商户运营')
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 100rpx;

		// 个人信息
		.user {
			background: #2C6FF3 url('https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/globalPages/user-bg.png') no-repeat left top;
			background-size: 100%;
			padding-bottom: 145rpx;
			position: relative;
			width: 100%;

			.user-content {
				margin-top: 34rpx;
				width: 100%;

				.head-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 100rpx;
					margin-left: 26rpx;
				}

				.user-name {
					font-size: 28rpx;
					color: #fff;
					margin-left: 33rpx;
				}

				.share {
					width: 30rpx;
					height: 30rpx;
					position: relative;
					margin-left: 20rpx;

					.share-image {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						left: 0;
						top: 0;

						>image {
							width: 30rpx;
							height: 30rpx;
						}
					}

					button {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						left: 0;
						top: 0;
						opacity: 0;
					}
				}

				.login-out {
					width: 140rpx;
					line-height: 52rpx;
					height: 52rpx;
					text-align: center;
					font-size: 24rpx;
					color: #2C6FF3;
					background-color: #fff;
					position: absolute;
					right: 0;
					top: 185rpx;
					z-index: 99;
					border-top-left-radius: 52rpx;
					border-bottom-left-radius: 52rpx;
				}
			}
		}


		// 常用菜单
		.menu {
			width: 724rpx;
			margin-left: 14rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 10rpx 0px rgba(174, 201, 255, 0.2);
			border-radius: 14rpx;
			margin-top: 24rpx;
			position: relative;
			padding: 20rpx 36rpx 42rpx;

			&.menu-userinfo {
				padding: 36rpx;
				margin-top: -102rpx;
			}

			.menu-title {
				font-size: 30rpx;
				font-weight: 800;
				color: #000000;
				position: absolute;
				left: 28rpx;
				top: 28rpx;
			}

			.u-content {
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-around;
				text-align: center;

				.u-item {
					line-height: 50rpx;

					.u-name {
						font-weight: bold;
						font-size: 30rpx;
					}

					.u-val {
						font-size: 28rpx;
						color: #666;
						position: relative;
						padding-left: 30rpx;
						display: inline-block;

						>image {
							width: 21rpx;
							height: 21rpx;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}

			.cu-btn {
				padding: 0 12rpx;
				font-size: 22rpx;
				height: 40rpx;
				line-height: 40rpx;
				background-color: #2C6FF3;
				color: #fff;

			}

			.edit {
				position: absolute;
				right: 28rpx;
				top: 28rpx;
			}

			.s-content {
				.s-item {
					line-height: 50rpx;

					>text {
						color: red;
					}
				}
			}

			.menu-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;

				>.image {
					width: 74rpx;
					height: 74rpx;
				}

				>view {
					color: #333333;
					font-size: 26rpx;
					line-height: 26rpx;
					margin-top: 16rpx;
				}
			}
		}

		.qrcode-content {
			padding: 24rpx;

			.qrcode-img {
				width: 400rpx;
				height: 400rpx;
			}

			.save-qrcode {
				margin-top: 24rpx;
			}
		}

		.chang-password {
			text-align: center;
			line-height: 60rpx;
			color: #2C6FF3;
			text-decoration: underline;
		}

		.pwd-popup-content {
			padding: 24rpx;

			>view:nth-child(1) {
				width: 160rpx;
			}

			>view:nth-child(2) {
				width: 100%;
			}
		}
	}
</style>