修改

nngkxxdp/src/main/resources/static/naqwzsjtj/naqwzsjtj/src/views/MapDetails.vue

@@ -4,19 +4,29 @@
 		<TopTitle :label="title" style="padding-left: 10px;padding-top: 10px;" />
 		<div style="background-color: #ffffff;">
 			<div style="padding-bottom: 10px;position: relative;height: 40px;">
-				<el-button style="position: absolute;right: 20px;" @click="back" type="primary">返回</el-button>
+				<el-button style="position: absolute;right: 1%" @click="back" type="primary">返回</el-button>
 			</div>
-			<div style="padding: 0px 10px 0px 10px; display: flex;">
+			<div style="padding: 0px 1% 0px 1%; display: flex;position: relative;">
 				<!-- 旧地址 -->
-				<div style="width: 49%;display: inline-block;margin-right: 25px;">
+				<div style="width: 49%;display: inline-block;margin-right: 2%;">
 					<el-card class="box-card">
 						<!-- 描述 -->
 						<div style="margin-bottom: 10px;">
 							<el-descriptions title="旧地址信息" :column="1" border>
-								<el-descriptions-item label="名称">{{ data.name }}</el-descriptions-item>
-								<el-descriptions-item label="地址">{{ data.originalAddress }}</el-descriptions-item>
-								<el-descriptions-item label="描述">{{ data.content ? data.content : '暂无描述' }}</el-descriptions-item>
-								<el-descriptions-item label="联系电话">{{ data.tel ? data.tel : '暂无联系电话' }}</el-descriptions-item>
+								<el-descriptions-item label="名称">
+									<div>{{ data.name }}</div>
+								</el-descriptions-item>
+								<el-descriptions-item label="地址" label-class-name="my-label" content-class-name="my-content">
+									<el-tooltip :content="data.originalAddress" placement="top-start" effect="dark">
+										<div class="my-div-content">{{ data.originalAddress }}</div>
+									</el-tooltip>
+								</el-descriptions-item>
+								<el-descriptions-item label="描述">
+									<div>{{ data.content ? data.content : '暂无描述' }}</div>
+								</el-descriptions-item>
+								<el-descriptions-item label="联系电话">
+									<div>{{ data.tel ? data.tel : '暂无联系电话' }}</div>
+								</el-descriptions-item>
 							</el-descriptions>
 						</div>
 						<!-- 地图 -->
@@ -35,10 +45,20 @@
 						<!-- 描述 -->
 						<div style="margin-bottom: 10px;">
 							<el-descriptions title="新地址信息" :column="1" border>
-								<el-descriptions-item label="名称">{{ data.name }}</el-descriptions-item>
-								<el-descriptions-item label="地址">{{ data.newAddress }}</el-descriptions-item>
-								<el-descriptions-item label="描述">{{ data.content ? data.content : '暂无描述' }}</el-descriptions-item>
-								<el-descriptions-item label="联系电话">{{ data.tel ? data.tel : '暂无联系电话' }}</el-descriptions-item>
+								<el-descriptions-item label="名称">
+									<div>{{ data.name }}</div>
+								</el-descriptions-item>
+								<el-descriptions-item label="地址" label-class-name="my-label" content-class-name="my-content">
+									<el-tooltip :content="data.newAddress" placement="top-start" effect="dark">
+										<div class="my-div-content">{{ data.newAddress }}</div>
+									</el-tooltip>
+								</el-descriptions-item>
+								<el-descriptions-item label="描述">
+									<div>{{ data.content ? data.content : '暂无描述' }}</div>
+								</el-descriptions-item>
+								<el-descriptions-item label="联系电话">
+									<div>{{ data.tel ? data.tel : '暂无联系电话' }}</div>
+								</el-descriptions-item>
 							</el-descriptions>
 						</div>
 						<!-- 地图 -->
@@ -62,7 +82,7 @@ import TopTitle from '../components/TopTitle'
 
 export default {
 	components: { TopTitle },
-  created() {
+	created() {
 	// 传来的参数
 	var json = localStorage.getItem('mapTempData')
 	if (json) {
@@ -111,6 +131,7 @@ export default {
 	init({ map }) {
 		// map.centerAndZoom(point, this.mapData.zoom)//缩放级别
 		map.enableScrollWheelZoom(true) //鼠标滚动缩放
+		
 	},
 	isEmpty(str) {
 		if (str && str.length > 0) {
@@ -126,7 +147,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .client-tabs {
   box-shadow: none;
 }
@@ -136,6 +157,26 @@ export default {
   }
 </style>
 
+<style>
+	.my-div-content {
+		display:-webkit-box;
+		text-overflow:ellipsis;
+		overflow:hidden;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient:vertical;
+	}
+	
+	.my-label {
+		font-weight: bold;
+		width: 30%;
+		height: 70px;
+	}
+	
+	.my-content {
+		height: 70px;
+	}
+</style>
+
 <style scoped lang="less">
 /* 禁用后的勾选*/
 /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
@@ -306,4 +347,5 @@ export default {
     border-left: transparent;
     background-color: #FAFAFA;
 }
+
 </style>