改版油站信息与设计图一致

pages/station-info/station-info.vue

@@ -1,21 +1,17 @@
 <template>
-	<view class="content my-bg">
+	<view class="page-content  bg-white">
 		<cu-custom class="main-topbar bg-main-oil" isBack bgColor="bg-main-oil">
 			<block slot="content" class="padding-top">油站信息</block>
 			<block slot="backText">返回</block>
 		</cu-custom>
-		<view class="bg-main-oil bg-view">
 
-		</view>
-		<view class="main-money bg-white margin radius">
+		<view class="main-money bg-white margin margin-bottom-0 radius">
 			<view class="cu-card case no-card ">
 				<view class="cu-item bg-white shadow">
 					<view class="image">
 						<image :src="mainURL+'default-station-bg.png'" mode="widthFix"></image>
-						<!-- <view class="cu-tag bg-blue">史诗</view> -->
-						<!-- <view class="cu-bar bg-shadeBottom"> <text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text></view> -->
 					</view>
-					<view class="cu-list bg-white position-re">
+					<view class="cu-list bg-white position-re move-top">
 						<view class="cu-item bg-white padding-sm ">
 							<view class="text-bold color-333 text-xl">
 								{{site.oilSiteName}}
@@ -23,19 +19,23 @@
 							<view class="color-999">
 								{{site.address}}
 							</view>
-							<view class="color-333 padding-top-xs">
+							<view class="color-333 padding-top-sm padding-bottom-sm text-sm ">
 								联系方式：<text v-if="site.linkMan">{{site.linkMan}}</text>
 								<text v-else>暂无</text>
-								<text v-if="site.phone">（{{site.phone}}）</text>
+								<text v-if="site.phone" @tap="makeCall(site.phone)">（{{site.phone}}）</text>
 								<text v-else>（暂无）</text>
 							</view>
+							<view class=" position-call text-xxl" @tap="makeCall(site.phone)">
+								<text class="cuIcon-phone  text-red"></text>
+							</view>
 						</view>
+
 					</view>
 
 				</view>
 			</view>
 		</view>
-		<view class="margin margin-bottom-0 padding-bottom my-bg">
+		<view class="padding-bottom ">
 			<OilMenuItem :oilItem="item" v-for="(item,index) in oilList" :key="index" />
 		</view>
 	</view>
@@ -110,6 +110,19 @@
 						})
 					}
 				})
+			},
+			makeCall(phone) {
+				if (phone) {
+					uni.makePhoneCall({
+						phoneNumber: phone
+					})
+				} else {
+					uni.showToast({
+						title: '暂无油站联系方式',
+						icon:'none'
+					});
+				}
+
 			}
 		}
 	};
@@ -134,5 +147,22 @@
 
 	image {
 		vertical-align: bottom;
+		background-color: rgba(113, 11, 233, 0.5)
+	}
+
+	.image {
+		border-radius: initial;
+		vertical-align: bottom;
+		background-color: rgba(11, 11, 251, 0.7)
+	}
+
+	.move-top {
+		margin-top: -2px;
+	}
+
+	.position-call {
+		position: absolute;
+		right: 30upx;
+		bottom: 30upx;
 	}
 </style>