From 11b98f4082cbb2be8fb2a396be9ebe00c0dceb2a Mon Sep 17 00:00:00 2001
From: hot777zz <912275990@qq.com>
Date: Thu, 2 Nov 2023 18:02:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A2=81=E8=88=AA=EF=BC=9A=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/detail/detail.vue | 91 +++++++++++++++++++++++++++++++----------
 1 file changed, 69 insertions(+), 22 deletions(-)

diff --git a/pages/detail/detail.vue b/pages/detail/detail.vue
index 8329b3a..6dc756b 100644
--- a/pages/detail/detail.vue
+++ b/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="call">
-						打电话
+				<view class="tab-right" @click="phonecall()">
+					<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{
-		height: 100px;
-	}
-	.tab-right{
-		width: 50%;
-		height: 100%;
+	.customer{
+		// height: 50px;
 		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>
\ No newline at end of file