jp-housekeep-electric/pages/workOrderManagement/workOrderMap.vue

<template>
	<view>
		<u-navbar title="工单地图" title-color="#101010">

		</u-navbar>
		<view class="tabs">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<!-- 地图 -->
		<view class="map">
			<image class="map-img" src="@/assets/img/map.png" mode=""></image>
			<!-- 标注1 -->
			<view class="location1">
				<image class="img" src="@/assets/img/riFill-cloud-off-fill1.svg" mode=""></image>
				<view class="corner">

				</view>
			</view>
			<!-- 标注2 -->
			<view class="location2">
				<view class="icon2-left">
					<image class="img1" src="@/assets/img/riFill-temp-cold-fill1.svg" mode=""></image>
				</view>
				<view class="icon2-right">
					
					<view class="corner2-top">
						荆鹏软件园01
					</view>
					<view class="corner2-bottom">
						温度异常
					</view>
				</view>
				<view class="corner2"></view>
			</view>
			<view class="card">
				<view class="item">
					<view class="title">
						<view class="icon-box">
							<image class="img" src="@/assets/img/riFill-temp-cold-fill1.svg" mode=""></image>
						</view>
						<view class="equipment">
							<view class="name1">
								荆鹏软件园01
							</view>
							<view class="name2">
								荆鹏集团
							</view>
						</view>
						<!-- 状态 -->
						<view class="state">

							<view class="icon ">

							</view>
							<view class="text">
								温度异常
							</view>


						</view>
					</view>
					<!-- 其他信息 -->
					<view class="else-infos">
						<view class="infos">
							<view class="infos-item">
								<view class="item-icon">
									<image class="icon-img" src="@/assets/img/riLine-map-pin-line 1.svg" mode=""></image>
								</view>
								<view class="item-value">
									荆州市沙市区江津东路155号荆鹏软件园
								</view>
							</view>
							<view class="infos-item">
								<view class="item-icon">
									<image class="icon-img" src="@/assets/img/riLine-map-pin-line 1.svg" mode=""></image>
								</view>
								<view class="item-value">
									2024-02-24 12:00:00
								</view>
							</view>
						</view>
						<view class="navigation">
							导航
							<view class="icon">
								<image class="navigation-img" src="@/assets/img/riFill-navigation-fill 1.svg" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待指派(1)'
				}, {
					name: '进行中(2)',

				}, {
					name: '已解决(3)',

				}],
				current: 0
			}
		},
		methods: {
			toDataMonitoringList() {
				uni.navigateBack()
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		background-color: #fff;
		height: 96rpx;
		position: sticky;
		top: 88rpx;
		z-index: 999;
	}

	// 地图
	.map {
		position: relative;

		.map-img {
			width: 100%;
			height: 100vh;
		}

		.location1 {
			width: 36px;
			height: 36px;

			text-align: center;
			border: 2px solid rgba(22, 119, 255, 1);
			border-radius: 999px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 89px;
			left: 38px;

			.img {
				width: 40rpx;
				height: 40rpx;
			}

			.corner {
				width: 0;
				height: 0;
				position: absolute;
				top: 34px;
				left: 0;
				right: 0;
				margin: auto;
				border-bottom: 8rpx solid transparent;
				border-left: 8rpx solid transparent;
				border-right: 8rpx solid transparent;
				border-top: 12rpx solid rgba(22, 119, 255, 1);
			}
		}

		.location2 {
			width: 280rpx;
			border-radius: 50px;
			background-color: rgba(22, 119, 255, 1);
			display: flex;
			position: absolute;
			top: 370rpx;
			left: 280rpx;
            
			.icon2-left {
				width: 72rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				border: 1px solid rgba(0, 185, 98, 100);
				border-radius: 999px;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				
               
				.img1 {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.icon2-right {
				color: #ffffff;
				line-height: 36rpx;
				padding-left: 8rpx;
				font-size: 28rpx;
                
				.corner2-top {
					font-weight: bold;
				}

				.corner2-bottom {
					font-size: 24rpx;

					.img2 {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.corner2 {
				width: 0;
				height: 0;
				position: absolute;
				top: 72rpx;
				left: 0;
				right: 0;
				margin: auto;
				border-bottom: 6px solid transparent;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-top: 8px solid rgba(22, 119, 255, 1);

			}
		}

		// 卡片
		.card {
			border-radius: 8px;
			border: 1px solid rgba(232, 232, 232, 1);
			box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
			background-color: rgba(255, 255, 255, 1);
			position: fixed;
			left: 24rpx;
			right: 24rpx;
			bottom: 32rpx;

			.item {
				border-bottom: 1px solid rgba(245, 245, 245, 1);
				padding: 32rpx 16rpx 16rpx 16rpx;

				.title {
					display: flex;
					align-items: flex-start;

					.icon-box {
						width: 72rpx;
						height: 72rpx;
						border-radius: 4px;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: rgba(219, 234, 255, 1);

						.img {
							width: 48rpx;
							height: 48rpx;
						}
					}

					.equipment {
						margin-left: 16rpx;

						.name1 {
							color: rgba(51, 51, 51, 1);
						}

						.name2 {
							color: rgba(119, 119, 119, 1);
							font-size: 24rpx;
							margin-top: 4rpx;
						}
					}

					// 状态
					.state {
						display: flex;
						align-items: center;
						margin-left: auto;

						.icon {
							width: 8px;
							height: 8px;
							background-color: rgba(22, 119, 255, 1);
							border-radius: 999px;
						}

						.text {
							color: rgba(51, 51, 51, 1);
							margin-left: 8rpx;
							font-weight: bold;
						}
					}
				}

				// 其他信息
				.else-infos {
					display: flex;
					justify-content: space-between;
					align-items: baseline;
					margin-top: 16rpx;

					.infos {
						color: rgba(119,119,119,1);
						font-size: 24rpx;
						.infos-item {
							display: flex;
							align-items: center;
                            margin-bottom: 8rpx;
							.item-icon {
								display: flex;
								align-items: center;
								.icon-img {
									width: 28rpx;
									height: 28rpx;
									
								}
							}
						}
					}
					.navigation{
						color: #333333;
						display: flex;
						align-items: center;
						.navigation-img{
							width: 28rpx;
							height: 28rpx;
							vertical-align: middle;
							margin-left: 8rpx;
							 transform: scaleX(-1);
						}
					}
				}

			}
		}
	}
</style>