联系方式样式开发

common/styles/global/components.scss

@@ -247,7 +247,7 @@ box-shadow: 0 1rpx 3rpx 0 #227ECE;box-sizing: border-box;padding: 4rpx 10rpx 0;}
     .list-time-box{
       width: 100rpx;height: 100rpx;background-color:#4d7bd3;border-bottom: 2rpx solid #0145c0;
       color: #fff;text-align: center;flex-shrink: 0;
-      .time-data{font-size: 36rpx;border-bottom: 1rpx solid #e9ffff;margin: 6rpx;padding-bottom: 6rpx;}
+      .time-data{font-size: 36rpx;border-bottom: 1rpx solid #e9ffff;margin:4rpx 6rpx;padding-bottom: 4rpx;}
       .time-year{font-size: 22rpx;}
     }
     .list-title-box{font-size: 28rpx;margin-left: 16rpx;color: #333;@include multi-line-ellipsis(2);line-height: 1.5;}

common/styles/global/pages.scss

@@ -66,4 +66,20 @@
 	.require-row{position: relative;}
 	.require-row::after{content: '*';color: red;
 	position: absolute;top: 66rpx;right: -30rpx;font-size: 36rpx;}
+}
+
+// 联系方式
+.lxfs-page{
+	.lxfs-content-box{height: calc(100vh - 410rpx);box-sizing: border-box;padding: 0 6rpx 12rpx;overflow-y: auto;}
+	.lxfs-map{
+		width: 656rpx;height: 518rpx;@include dljt-no-repeat-cover;margin: 0 auto;
+		background-image: url("@/static/images/xygk/xywh-lxfs-img.png");
+	}
+	.lxfs-tel-box{font-size: 28rpx;color: #333;margin: 36rpx 0;box-sizing: border-box;padding-left: 16rpx;}
+	.lxsf-code-box{
+		display: flex;justify-content: space-evenly;color: #444;text-align: center;margin: 82rpx 0;
+		>view{width: 33%;}
+		uni-image{width:200rpx;height: 200rpx;}
+		.code-text-box{box-sizing: border-box;padding:0 24rpx;word-break: break-all;}
+	}
 }

pages/xygkLianxifangshi/xygkLianxifangshi.vue

@@ -1,9 +1,9 @@
 <template>
-	<view class="dljt-page-box" v-if="data.info">
+	<view class="dljt-page-box lxfs-page" v-if="data.info">
 		<MtaNavbar></MtaNavbar>
 		<view class="dljt-container-box">
 			<!-- 详情页面 -->
-			<view class="dljt-page-title">党群工作</view>
+			<view class="dljt-page-title">联系方式</view>
 			<view class="dljt-page-content-box">
 				<!-- 导航 -->
 				<view class="dljt-breadcrumb-box">
@@ -13,25 +13,26 @@
 					<icon class="breadcrumb-jt"></icon>
 					<view class="breadcrumb-active">联系方式</view>
 				</view>
-				<view class="dljt-detail-box">
+				<view class="lxfs-content-box">
+					<view class="lxfs-map"></view>
 					<!-- 图 -->
-					<view>办公室电话:{{data.info.bangongshi}}</view>
-
-					<view>职业培训电话:{{data.info.zhiyepeixun}}</view>
-
-					<view>招生电话:{{data.info.zhaosheng}}</view>
+					<view class="lxfs-tel-box">办公室电话:{{data.info.bangongshi}}</view>
+					<view class="lxfs-tel-box">职业培训电话:{{data.info.zhiyepeixun}}</view>
+					<view class="lxfs-tel-box">招生电话:{{data.info.zhaosheng}}</view>
 					
-					<view>
-						<image :src="data.info.douyinPic"></image>
-						<view>{{data.info.douyin}}</view>
-					</view>
-					<view>
-						<image :src="data.info.gongzhonghaoPic"></image>
-						<view>{{data.info.gongzhonghao}}</view>
-					</view>
-					<view>
-						<image :src="data.info.shipinhaoPic"></image>
-						<view>{{data.info.shipinhao}}</view>
+					<view class="lxsf-code-box">
+						<view>
+							<image :src="data.info.douyinPic"></image>
+							<view class="code-text-box">{{data.info.douyin}}</view>
+						</view>
+						<view>
+							<image :src="data.info.gongzhonghaoPic"></image>
+							<view class="code-text-box">{{data.info.gongzhonghao}}</view>
+						</view>
+						<view>
+							<image :src="data.info.shipinhaoPic"></image>
+							<view class="code-text-box">{{data.info.shipinhao}}</view>
+						</view>
 					</view>
 				</view>