zhapp/pages/quote/modules/userView.vue

<template>
	<view class="tab dis f-c">
		<view class="header-title" :style="headerStyle">{{title}}</view>
		<view class="items dis f-c ">
			<view class="item dis a-c j-s">
				<text>姓名</text>
				<text>{{info.name}}</text>
			</view>
			<view class="item dis a-c j-s">
				<text>手机号</text>
				<text>{{info.mobile}}</text>
			</view>
			<view class="item dis a-c j-s">
				<text>证件号</text>
				<text>{{info.identifyNumber}}</text>
			</view>
			<view class="item dis a-start j-s">
				<text>地址</text>
				<text>{{info.addr}}</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: 'name', //插件名称
		props: {
			info: {
				type: Object,
				default: () => {
					return {};
				}
			},
			title: {
				type: String,
				default: '基本信息'
			},
			headerStyle: {
				type: Object,
				default: () => {
					return {};
				}
			},

		},
		watch: {
			info(newval) {
				this.info = newval;
			}
		},
		computed: {},
		data() {
			return {

			};
		},
		methods: {}
	};
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
	.tab {
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 0 0 10rpx 10rpx;

		.header-title {
			background: linear-gradient(180deg, #FFFCEA 0%, #FFFFFF 100%);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.items {
			padding: 0 20rpx;
			box-sizing: border-box;

			.item {
				margin-bottom: 30rpx;

				text:first-child {
					font-size: 30rpx;
					color: #666;
				}

				text:last-child {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					width: 75%;
					text-align: right;
				}
			}
		}

	}
</style>