jp-housekeep-hall/pages/mine/tenantInformation.vue

<template>
	<view>
		<u-navbar title="用户信息"  title-color="#101010" ></u-navbar>
		<!-- 地址 -->
		<view class="address-box">
			<view class="address">
				<view class="address-title">
					荆鹏软件园
				</view>
				<view class="address-value">
					<u-icon name="map"></u-icon>荆州市沙市区江津东路附155号
				</view>
			</view>
			<!-- 切换 -->
			<view class="change">
				切换
			</view>
			<view class="image" v-if="false" >
				<image class="img" src="@/assets/img/mineBackground.svg" mode=""></image>
			</view>
		</view>
		<!-- 租户信息 -->
		<view class="infos">
			<view class="item">
				<view class="item-title">
					租户单位
				</view>
				<view class="item-value">
					联通公司
				</view>
			</view>
			<view class="item">
				<view class="item-title">
					户号
				</view>
				<view class="item-value">
					080808
				</view>
			</view>
			<view class="item">
				<view class="item-title">
					联系人
				</view>
				<view class="item-value">
					周琼15500001111
				</view>
			</view>
			<view class="item">
				<view class="item-title">
					租用地点
				</view>
				<view class="item-value">
					A栋7楼 701、702、703
				</view>
			</view>
			<view class="item">
				<view class="item-title">
					租期
				</view>
				<view class="item-value">
					2024.02.01-2024.07.31
				</view>
			</view>
			
		</view>
		<!-- 园区管家 -->
		<view class="house-keeper">
			<view class="headline">
				园区管家 (08:00-18:00)
			</view>
			<view class="contact-information">
				<view class="item">
					<view class="photo photo1">
						<image class="img" src="@/assets/img/if-ui-dial-phone 1.svg" mode=""></image>
					</view>
					<view class="tel">
						<view class="title">
							园区办公室
						</view>
						<view class="value">
							0716-8121234
						</view>
					</view>
					<view class="contact">
						联系Ta
						<text> <image class="img" src="@/assets/img/riFill-phone-fill.svg"></image></text>
					</view>
				</view>
				
				<view class="item">
					<view class="photo">
						<image class="img" src="@/assets/img/wImage@photo.png" mode=""></image>
					</view>
					<view class="tel">
						<view class="title">
							李书易
						</view>
						<view class="value">
							19289999000
						</view>
					</view>
					<view class="contact">
						联系Ta
						<text> <image class="img" src="@/assets/img/riFill-phone-fill.svg"></image></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 返回-->
		<view class="back">
			<button class="btn">返回</button>
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
	// 地址
	.address-box{
		border-radius: 8px;
		background: linear-gradient(90deg, rgba(49,110,207,1) 2%,rgba(20,73,159,1) 100%);
		color: #fff;
		padding:40rpx 32rpx;
		margin: 24rpx 32rpx;
		display: flex;
		align-items: center;
		position: relative;
		.address{
			.address-title{
				font-size: 40rpx;
			}
			.address-value{
				font-size: 24rpx;
				margin-top: 8rpx;
			}
		}
		// 切换
		.change{
			border: 1px solid rgba(255,255,255,1);
			width: 128rpx;
			height: 64rpx;
			line-height: 64rpx;
			border-radius: 50px;
			color: rgba(255,255,255,1);
			text-align: center;
			margin-left: auto;
		}
		.image {
			width: 174rpx;
			height: 174rpx;
			position: absolute;
			right: 0;
			top: 20rpx;
		
			.img {
				width: 100%;
				height: 100%;
			}
		}
	}
  
  // 租户信息
  .infos{
	  border-radius: 8px;
	  background-color: #fff;
	  margin: 36rpx 32rpx;
	  .item{
		  display: flex;
		  align-items: center;
		  padding: 28rpx 32rpx;
		  border-bottom: 1px solid rgba(221,221,221,1);
		  .item-title{
			  color: rgba(119,119,119,1);
			  font-size: 32rpx;
			  width: 128rpx;
		  }
		  .item-value{
			  color: rgba(51,51,51,1);
			  font-size: 32rpx;
			  margin-left: 40rpx;
		  }
	  }
  }

  // 园区管家
  .house-keeper{
	  border-radius: 8px;
	  background-color: #fff;
	  margin: 24rpx 32rpx;
	  padding: 32rpx;
	  .headline{
		  color: rgb(51,51,51);
		  font-size: 36rpx;
	  }
	  .contact-information{
		  .item{
			  display: flex;
			  align-items: center;
			  margin-top: 40rpx;
			  .photo{
				  width: 96rpx;
				  height: 96rpx;
				  border-radius: 50px;
				  display: flex;
				  align-items: center;
				  justify-content: center;
				  .img{
					  width: 96rpx;
					  height: 96rpx;
				  }
				 
			  }
			  .photo1{
				  background-color: #1677FF;
				  .img{
				  					  width: 48rpx;
				  					  height: 48rpx;
				  					  
				  }
			  }
			  .tel{
				  margin-left: 16rpx;
				  .title{
					  color: rgba(51,51,51,1);
					  font-size: 32rpx;
				  }
				  .value{
					  color: rgba(119,119,119,1);
					  font-size: 24rpx;
					  margin-top: 8rpx;
				  }
			  }
			  
			  .contact{
				  margin-left: auto;
				  display: flex;
				  color: rgba(22,119,255,1);
				  line-height: 32rpx;
				  .img{
					  width: 32rpx;
					  height: 32rpx;
					  margin-left: 4rpx;
					  transform: scaleX(-1);
				  }
			  }
		  }
	  }
  }
  // 返回
  .back{
	  margin: 24rpx 32rpx;
	  .btn{
		  border-radius: 8px;
		  background-color: rgba(255,255,255,1);
		  color: rgba(119,119,119,1);
		  font-size: 32rpx;
		  line-height: 88rpx;
		  border: 1px solid rgba(205,205,205,1);
	  }
  }
</style>