project_patrolCheckIn/components/PatrolPoints.vue

<template>
	<view class="home__main-top">
		<view class="home__main-top-box">
			<view class="top-box-address">
				<u-icon name="map-fill" color="#fff" size="20"></u-icon>
				<p class="top-box-address-text">巡更点</p>
			</view>
			<view class="top-box-name">
				{{positionName ||  '--'}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "PatrolPoints",
		props: {
			name: {
				type: String,
				default: '巡更点'
			},
			positionName: {
				type: String
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.home__main-top {
		height: 140px;
		background: #3D8EFE;
		border-bottom-left-radius: 8%;
		border-bottom-right-radius: 8%;

		.home__main-top-box {
			height: 80px;
			box-sizing: border-box;
			padding-left: 15px;
			padding-top: 35px;

			.home__main-top-text {
				font-weight: 700;
				font-size: 20px;
				line-height: 30px;
				color: #fff;
			}

			.home__main-top-text1 {
				text-align: center;
			}

			.top-box-address {
				display: flex;
				align-items: center;
				margin-bottom: 10px;
				color: #fff;
				font-size: 16px;

				.top-box-address-text {
					margin-left: 10px;
				}
			}

			.top-box-name {
				font-weight: 700;
				font-size: 20px;
				line-height: 30px;
				padding-left: 25px;
				color: #fff;
			}
		}
	}
</style>