梁航：详情页完成

pages/detail/detail.vue

@@ -1,7 +1,7 @@
 <template>
-	<view class="detail">
+	<view class="detail" ref="viewref">
 		<view class="swiper">
-				<u-swiper :list="list" height="300rpx" radius="0"></u-swiper>
+				<u-swiper :list="list" height="500rpx" radius="0"></u-swiper>
 		</view>
 		<view class="sub-detail u-flex">
 			<view class="title">
@@ -10,15 +10,15 @@
 			<view>
 				<u-grid :col="3">
 						<u-grid-item>
-							<view class="grid-text">22</view>
+							<view class="grid-textup">22</view>
 							<view class="grid-text">租金</view>
 						</u-grid-item>
 						<u-grid-item>
-							<view class="grid-text">22</view>
+							<view class="grid-textup">22</view>
 							<view class="grid-text">转让费</view>
 						</u-grid-item>
 						<u-grid-item>
-							<view class="grid-text">22</view>
+							<view class="grid-textup">22</view>
 							<view class="grid-text">面积</view>
 						</u-grid-item>
 					</u-grid>
@@ -34,28 +34,30 @@
 				<u-avatar :src="src"></u-avatar>
 				<u-cell title="张先生" label="123456"></u-cell>
 			</view>
-			<u-cell title="店铺介绍" label="美食杂货店是一个主打食品和日用杂货的淘宝222222222222222222222美食杂货店是一个主打食品和日用杂货的淘宝美食杂货店是一个主打食品和日用杂货的淘宝"></u-cell>
+			<u-cell title="店铺介绍" label="美食杂货店是一个主打食品和日用杂货的淘宝222222222222222222222美食杂货店是一个主打食品和日用杂货的淘宝美食杂货店是一个主打食品和日用杂货的淘宝" label-style="color = #5D5D5D"></u-cell>
 		</view>
 		<view class="bottom">
 			<view class="bot-tab">
 				<view class="tab-left">
-					<view class="share">
+					<view class="share" @click="share()">
 						<u-icon name="share-fill" color="green"></u-icon>
 						分享
 					</view>
-					<view class="customer">
+					<view class="customer" @click="assist()">
 						<u-icon name="server-fill" color="green"></u-icon>
 						客服
 					</view>
 				</view>
-				<view class="tab-right">
+				<view class="tab-right" @click="phonecall()">
-					<view class="call">
+					<view class="call" >
-						打电话
+						<text>打电话</text>
 					</view>
 				</view>
 			</view>
 	</view>
-		
+		<view class="bug-figure">
+			
+		</view>
 	</view>
 </template>
 
@@ -76,11 +78,28 @@
 			},
 		data() {
 			return {
+				viewheight:'',
 				
 			}
 		},
 		methods: {
-			
+			// getHeight(){
+			// 	let height = this.$refs.viewref.$el.offsetHeight
+			// 	this.viewheight = height
+			// },
+			phonecall(){
+				console.log('打电话');
+			},
+			share(){
+				console.log('分享');
+			},
+			assist(){
+				console.log('客服');
+			}
+		},
+		mounted(){
+			// this.getHeight();
+			// console.log(viewheight)
 		}
 	}
 </script>
@@ -90,12 +109,22 @@
 		// background-color: #F8F8F8;
 		height: 100%;
 	}
+	.bug-figure{
+		height: 100rpx;
+	}
 	.swiper {
 		}
 	.title{
 		padding: 20rpx;
 		background-color: #fff;
 	}
+	.grid-textup{
+		color: #CC3333;
+		font-size: 20px;
+	}
+	.grid-text{
+		color: #B3B3B3;
+	}
 	.location-detail{
 		display: flex;
 		margin-top: 20rpx;
@@ -120,7 +149,8 @@
 		background-color: #fff;
 		width: 100%;
 		z-index: 100;
-		height: 100rpx;
+		// height: 100rpx;
+		// bottom: calc(var(--window-bottom) + 20px);
 	}
 	.bot-tab{
 		display: flex;
@@ -131,19 +161,36 @@
 		width: 50%;
 		display: flex;
 		justify-content: space-around;
-		height: 100px;
+		height: 50px;
 	}
-	.coustom{
+	.customer{
-		height: 100px;
+		// height: 50px;
-	}
-	.tab-right{
-		width: 50%;
-		height: 100%;
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		flex-direction: column;
+		width: 50%;
+	}
+	.tab-right{
+		width: 50%;
+		height: 50px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-image: linear-gradient(to right, #E86262, #CC3333);
 	}
 	.share{
-		
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		width: 50%;
+	}
+	.call{
+		color: #fff;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
 	}
 </style>