样式优化

common/styles/global/pages.scss

@@ -1197,6 +1197,39 @@
 		padding: 20rpx 24rpx 20rpx;background-color: #f4f6fa;box-sizing: border-box;
 		.phone-green-btn{font-size: 28rpx;}
 	}
+	.kh-scroll-view{height: calc(100vh - 398rpx - var(--status-bar-height));}
+	.uni-list--border-top{display: none!important;}
+	.ht-list-item-box{
+		width: 100%;background-color: #f4f6fa!important;
+		.uni-list--border{display: none!important;}
+		.uni-list-item__container{padding: 0 24rpx 24rpx;flex-direction: column;}
+	}
+	.card-head-row{
+		display: flex;flex-direction: row;justify-content: flex-end;position: relative;
+		.ht-head-btn{font-size: 24rpx;width: 120rpx;padding: 0 10rpx;flex-shrink: 0;
+		line-height: 50rpx;margin: 0;}
+		.ht-head-btn + .ht-head-btn{margin-left: 16rpx;}
+		.del-btn-box{
+			width: 80rpx;height: 80rpx;position: absolute;left: -24rpx;top: -16rpx;
+			display: flex;align-items: center;justify-content: center;
+			.del-btn{width: 40rpx;height: 40rpx;display: inline-block;vertical-align: middle;margin-left: 24rpx;
+			@include ezy-no-repeat-cover;background-image: url("@/static/images/common/clear-bz-icon.svg");}
+		}
+	}
+	.kh-card-box{
+			background-color:#e5f8f4;display: flex;flex-direction: column;margin-top: 16rpx;
+			box-sizing: border-box;padding: 24rpx;border-radius: 16rpx;border: 1rpx solid #f0f1f5;
+		.card-body-row{
+			display: flex;flex-direction: column;justify-content: space-evenly;border: 1rpx solid #f0f1f5;
+			background-color: #fdfdfd;border-radius: 16rpx;margin-top: 24rpx;padding: 12rpx 0;min-height: 220rpx;
+			.body-row{display: flex;align-items: center;padding: 12rpx 24rpx;box-sizing: border-box;}
+			.user-icon,.tel-icon,.idcard-icon{width: 36rpx;height: 36rpx;@include ezy-no-repeat-cover();margin-right: 20rpx;}
+			.user-icon{background-image: url("@/static/images/common/user-green-icon.png");}
+			.tel-icon{background-image: url("@/static/images/common/tel-green-icon.png");}
+			.idcard-icon{background-image: url("@/static/images/common/zymc-icon.png");}
+		}
+	}
+	
 }
 
 /* 客户info页 */
@@ -1208,4 +1241,57 @@
 		.phone-form-label{line-height: 70rpx;}
 	}
 	.info-btn{width: 360rpx;margin: 64rpx auto 24rpx;font-size: 30rpx;}
+}
+
+/* 三方合同新增*/
+.sfht-info-page{
+	height: 100vh;background-color: #f8f9fd;display: flex;flex-direction: column;
+	.sfht-form-box{
+		padding: 24rpx 24rpx 0;box-sizing: border-box;
+		.form-radius-box{border-radius: 16rpx;border: 1rpx solid #f0f1f5;}
+		.form-label-input{border: 1rpx solid #f8f8f8;}
+	}
+	
+	// collapse
+	.sfht-collapse-box{
+		background-color: #f8f9fd!important; padding: 24rpx 24rpx 0;box-sizing: border-box;
+		.uni-collapse-item{
+			background-color: #fff;border-radius: 16rpx;border: 1rpx solid #f0f1f5;overflow: hidden;
+			.uni-collapse-item__wrap-content.uni-collapse-item--border{border: 0;}
+			.uni-collapse-item__title{
+				.uni-icons{width: 30rpx;height: 30rpx;@include ezy-no-repeat-cover;
+				background-image: url("@/static/images/common/nav-bar-jt-bottom.svg");
+				transform: rotate(180deg);margin-left: 4rpx;}
+				.uni-icons::before{display: none;}
+			}
+			.uni-collapse-item__title::focus-visible{border: 0;}
+			.uni-collapse-item__title.uni-collapse-item-border{border: 0;}
+			.uni-collapse-item__title.is-open.uni-collapse-item-border{border-bottom: 1rpx solid #f4f4f4;}
+			.uni-collapse-item__title-text{font-size: 30rpx;color: #000;}
+		}
+		
+		.form-label-input{border-bottom: 1rpx solid #f8f8f8;}
+		.form-label-input:last-child{border-bottom: 0;}
+	}
+	
+	// add btn
+	.sfht-add-row{    
+		display: flex;text-align: right;justify-content: flex-end;
+		.sfht-title-add-btn{
+			display: flex;align-items: center;
+			font-size: 26rpx;background-color: #f2fbf8;color: #3fd2a1;padding: 6rpx 24rpx;
+			line-height: 1.5;border-radius: 24rpx;margin:16rpx 16rpx 0;
+			icon{
+				width: 30rpx;height: 30rpx;@include ezy-no-repeat-cover;margin-left: 20rpx;
+				background-image: url("@/static/images/common/add-icon.svg");position: relative;
+			}
+			icon::before{
+				content: '';width: 1rpx;height: 30rpx;display: block;
+				background-color: #c2e6da;
+				position: absolute;top: 0;left: -10rpx;
+				}
+		}
+	}
+	
+	
 }

pages/admin/Hetong/addSanfangHetong.vue

@@ -1,21 +1,27 @@
 <template>
-	<view class="phone-navBar-box">
+	<view class="sfht-info-page">
+		
+	
+	<view class="icon-title-navBar-box">
 		<view @click="goUpPage" class="nav-bar-icon"></view>
 		<text class="nav-bar-title">新增三方合同</text>
 	</view>
-
-	<!-- 合同模板 -->
-	<view class="form-label-select">
-		<view class="phone-form-label"><text class="form-label-require"></text>合同模板</view>
-		<picker :range="data.mobanList" mode='selector' :value="data.mobanIndex" range-key="name"
-			@change="onMobanSelect" class="select-picker-box">
-			<template v-if="data.mobanIndex==null">请点击选择</template>
-			<view class="form-radio-select" v-else>
-				<view>{{ data.mobanList[data.mobanIndex].name  }}</view>
-			</view>
-		</picker>
+	<!-- form -->
+	<view class="sfht-form-box">
+		<!-- 合同模板 -->
+		<view class="form-label-select form-radius-box">
+			<view class="phone-form-label"><text class="form-label-require"></text>合同模板</view>
+			<picker :range="data.mobanList" mode='selector' :value="data.mobanIndex" range-key="name"
+				@change="onMobanSelect" class="select-picker-box">
+				<view class="form-radio-select" >
+					<view v-if="data.mobanIndex==null">请点击选择</view>
+					<view v-else>{{ data.mobanList[data.mobanIndex].name}}</view>
+					<icon></icon>
+				</view>
+			</picker>
+		</view>
 	</view>
-
+	
 	<!-- 客户信息 -->
 	<kehuCardVue :info="data.kehu"></kehuCardVue>
 	<!-- 家政人员 -->
@@ -36,6 +42,7 @@
 	<selectKh ref="khRef"></selectKh>
 	<!-- 家政 -->
 	<selectJz ref="jzRef"></selectJz>
+	</view>
 </template>
 
 <script setup>

pages/admin/Hetong/components/kehuCard.vue

@@ -1,22 +1,29 @@
 <template>
-	<uni-collapse>
+	<uni-collapse class="sfht-collapse-box">
 		<uni-collapse-item title="客户信息" :open="true">
-			<view>客户选择 <icon></icon></view>
-			<view>
-				<text>姓名：</text>
-				<text>{{info.realName}}</text>
+			<view class="sfht-add-row">
+				<view class="sfht-title-add-btn">客户选择<icon></icon></view>
 			</view>
-			<view>
-				<text>身份证：</text>
-				<text>{{info.idCard}}</text>
+			
+			<view class="form-label-input">
+				<view class="phone-form-label"><text class="form-label-require">*</text>姓名</view>
+				<uni-easyinput v-model="info.realName"
+					placeholder="请输入姓名" />
 			</view>
-			<view>
-				<view>电话：</view>
-				<view>{{info.tel}}</view>
+			<view class="form-label-input">
+				<view class="phone-form-label"><text class="form-label-require">*</text>电话</view>
+				<uni-easyinput v-model="info.tel"
+					placeholder="请输入电话" />
 			</view>
-			<view>
-				<view>具体地址：</view>
-				<view>{{info.dizhi}}</view>
+			<view class="form-label-input">
+				<view class="phone-form-label"><text class="form-label-require"></text>身份证</view>
+				<uni-easyinput v-model="info.idCard"
+					placeholder="请输入身份证" />
+			</view>
+			<view class="form-label-input">
+				<view class="phone-form-label"><text class="form-label-require"></text>具体地址</view>
+				<uni-easyinput v-model="info.dizhi"
+					placeholder="请输入具体地址" />
 			</view>
 		</uni-collapse-item>
 	</uni-collapse>

static/images/common/add-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1764039525337" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5639" data-spm-anchor-id="a313x.search_index.0.i2.53483a81C9vMmb" width="60" height="60" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 71.68c-242.688 0-440.32 197.632-440.32 440.32s197.632 440.32 440.32 440.32 440.32-197.632 440.32-440.32-197.632-440.32-440.32-440.32z m0 819.2c-208.896 0-378.88-169.984-378.88-378.88s169.984-378.88 378.88-378.88 378.88 169.984 378.88 378.88-169.984 378.88-378.88 378.88z" p-id="5640" fill="#3fd2a1"></path><path d="M542.72 261.12H481.28v220.16H261.12v61.44h220.16v220.16h61.44v-220.16h220.16V481.28h-220.16z" p-id="5641" fill="#3fd2a1"></path></svg>